Form inputs inside jQuery draggable objects unedited

I am trying to put a form inside an element on which jQuery sorting is active. There is a DIV element that is movable (with jQuery sorting), an IMG element that is used as a handler to move the DIV and FORM element with inputs inside. Both FORM and IMG els are inside the DIV. The problem is that the inputs inside the form cannot be edited . When I turn off sorting, it works fine.

Am I doing something wrong or is it a mistake? Is there any way to fix this?

Thank you

+4
source share
4 answers

I had the same problem. I got the sorted code from the jquery-ui site and it had the following line of jquery code:

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

As soon as I commented on this, I was able to change my forms again. This might work for you. I am sure that this will cause me other headaches (

+8
source

The solution is to simply bind the click handler to the form elements after the sorted call, and then set the focus on 'this' in the event handler, for example:

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

I made a workaround. Since I use ajax to load and submit the form, I just don't run the code to make things sorted when the form (with all els to be sorted) loads, and then when it submits, I make it sortable again. Not a solution, but did the job for me.

0
source

Try the following:

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

All Articles