Jeditable randomly initiating draggable on nested elements

Question

I use jquery-ui draggable for drag-and-drop and jeditable for inline editing.

When I drag an item that is also being edited, immediately after deleting it, jeditable kicks and appears in edit mode.

How to disable this behavior?

Edit - the problem is due to netsting - see this example . I also added draggable to the mix to make the example more realistic (the actual real problem is in this site I'm working on)

Note - although this question has an accepted answer due to reward rules, the problem is still not resolved for me.

Answer 1

UPDATED 2: use children ()

DEMO 2: http://jsbin.com/izaje3/2

in response to your comment

$(function() { $('.editable').editable(); $('.draggable').draggable({ drag: function(event, ui) { $(this).children('div').removeClass('editable') }, stop: function(event, ui) { $(this).children('div').addClass('editable') } }); });​ 

DEMO: http://jsbin.com/ihojo/2

 $(function() { $(".draggable").draggable({ drag: function(event, ui) { $(this).unbind('editable') } }); $(".editable").editable(); }); 

OR you can do like this:

 $(function() { $('.editable').editable(); $('.draggable').draggable({ drag: function(event, ui) { $(this).removeClass('editable') }, stop: function(event, ui) { $(this).addClass('editable') } }); }); 

Assuming you have something like this:

 <div class="draggable editable"></div> 

NOTE: just for the sake of it, you can also take advantage of the handle method!

http://jqueryui.com/demos/draggable/#handle

Answer 2

I found this post because today I ran into this exact problem (nested jEditable inside jQuery UI Draggable); while I don’t think my solution is particularly elegant, I felt that I should share it if someone else has a problem.

Instead of trying to untie and reinitialize jEditable on drag events (which seems to fire the click event AFTER reinitialization on stop ()), it was easier for me to set jEditable to use a custom event that fires only on mouseup if draggable is not draggable (simulating a click).

The anonymous function as the first argument of the edited one should be replaced with the URL to which you send the POST, if this is your thing.

http://jsbin.com/izaje3/13

 var notdragged = true; $('.editable').editable(function(value, settings) { return value; }, {event : 'custom_event' }); $('.draggable').draggable({ start: function(event, ui) { notdragged = false; } }); $('.editable').bind('mousedown', function() { notdragged = true; }).bind('mouseup', function() { if (notdragged) { $(this).trigger("custom_event"); } }); 

Answer 3

oftomh, you should try and hold the Event object inside the drop handler, and then try to call event.preventDefault() , event.stopImmediatePropagation() or event.stopPropagation()

fortunately for you you are on jQuery. Running such a cross browser using vanilla JS is annoying.

Answer 4

The ripper

A possible workaround is to use the double-click event for your jEditable component.

To do this, simply initialize the jEditable object with the following option:

 event: 'dblclick' 

Answer 5

You can try setting contenteditable = "false" for these elements. Just try adding this attribute to the corresponding html tag and see what happened.