Form inputs inside jQuery draggable objects unedited

Question

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

Answer 1

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 (

Answer 2

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(); }); 

Answer 3

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.

Answer 4

Try the following:

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