'jQuery draggable sortable input elements

I use the jQuery UI library to drag and sort elements: http://jqueryui.com/demos/sortable This works fine but I can't drag input elements such as a textarea. These textarea's are disabled so no need to be able to write in them. I googled around a bit and noticed that I ain't the only one with this problem. There are some semi-solutions for this but they are all dated it seems. (jQuery develops quickly).

javascripthtmljquery-uijquery-ui-sortablejquery-ui-draggable


Solution 1:[1]

This should work:

HTML: 

<div class="sortable-wrapper">
<ul id="sortable-list">
<div class="ui-state-default">
<textarea></textarea>
</div>
</ul>
</div>

jQuery:

$( "#sortable-list" ).sortable();
$( "#sortable-list" ).disableSelection();

Solution 2:[2]

You have to provide some code for me if I should be able to help you.

(Note: If you are trying to drag the item while grabbing the textarea you should implement some switch to turn selection on/off. I would suggest a different approach where you can always edit the textarea by clicking inside. For sorting I would use a handle to grab.)

The jQuery sortable works with lists, that is <ul> and <ol> containing <li>. Often issues like this is caused by incorrect html.

<ul class="my-items">
<li><textarea></textarea></li>
<li><textarea></textarea></li>
<li><textarea></textarea></li>
<li><textarea></textarea></li>
</ul>

jQuery

 $( ".my-items" ).sortable();

If you like to disable text-selection inside the list-item, do it on all text-elements. Not the textarea. Wrap text in p, span, div and call disableSelection() only on those elements.

It's also a good practice to validate html before troubleshooting scripts. I prefer the http://validator.w3.org/ service.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 graemeboy
Solution 2

Related Questions