Inputs not editable with jQuery UI Draggable?

 In Blog

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.

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Not readable? Change text. captcha txt

Start typing and press Enter to search

:nth-child(N) (CSS selector)