Form inputs inside jQuery draggable objects are uneditable

I'm trying to put a form inside an element, on which jQuery sortable is active. There's a DIV element, which is movable (with jQuery sortable), an IMG element, which is used开发者_运维问答 as a handler for moving the DIV and FORM element with inputs inside. Both FORM and IMG els are inside the DIV. Problem is, that inputs inside the form can't be edited. When I turn sortable off, it works fine.

Am I doing something wrong or is it a bug? Is there a way to fix it?

Thank you kindly

I had this same issue. I got the sortable code from the jquery-ui website, and it had the following line of jquery code:

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

once I commented this out, I was able to edit my forms again. It may work for you. I'm sure this will cause me other headaches (

The solution to this is to just bind a click handler to the form elements after the sortable call and then within the event handler set the focus to 'this', e.g.:

jQuery('.sortable-list input[type=text]').click(function(){ jQuery(this).focus(); });

I've made a workaround. Because I'm using ajax to load and send the form, I simply don't run the code to make things sortable when the form (with all els to be sortable) is loaded, then when it is sent I make it sortable again. Not solution, but made the job for me.

Try this:

//For disable
$("input, select, textarea").bind('mousedown.ui-disableSelection selectstart.ui-disableSelection', function(e){
    e.stopImmediatePropagation();
});