Inputs not editable with jQuery UI Draggable?

During my work on one of my project, I faced a strange issue.

At the begin, I used the jQuery UI Draggable and inside the container

<ul id="sortable">
<li>HTML CODE HERE 1 + some element inputs ( Textarea, textbox, select dropdow... )</li>
<li>HTML CODE HERE 2 + some element inputs ( Textarea, textbox, select dropdow... )</li>
<li>HTML CODE HERE 3 + some element inputs ( Textarea, textbox, select dropdow... )</li>
</ul>


Till now everything was work fine and perfect and the inputs working without any problem.

I made some element of sortable list as disabled element, to avoid the sortable or draggable for certains elements.

My code was something like this:

<ul id="sortable">
<li>HTML CODE HERE 1 + some element inputs ( Textarea, textbox, select dropdow... )</li>
<li class="disable">HTML CODE HERE 2 + some element inputs ( Textarea, textbox, select dropdow... )</li>
<li>HTML CODE HERE 3 + some element inputs ( Textarea, textbox, select dropdow... )</li>
</ul>


My JS code was something like this:

jQuery( "ul#sortable" ).sortable({
placeholder: "ui-sortable-placeholder",
cancel:'li.disable'
});


But here all the inputs into the sortable list stop working properly and stop selectable.

After some searching over Google and some investigation into the code and jQuery UI, I found the problem!

jQuery UI binds to the mousedown event on the element I called disable ( cancel:’li.disable’ ) on. Inside that event, they are call preventDefault(). Because of event propagation this was causing all elements to be unselectable.

So the solution to fix this issue was:

$('.sortableEvents li select, .sortableEvents li textarea').bind('mousedown.ui-disableSelection selectstart.ui-disableSelection', function(event) {
event.stopImmediatePropagation();
});

And everything back to working without any problem and the inputs elements selectable again!

I hope this may help someone in the future.