jeditable accidentally triggering on Draggable on nested items

Question

I'm using jquery-ui's draggable for drag-and-drop, and jeditable for inline editing.

When I drag and drop an element that's also editable, right after it's dropped jeditable kicks in and pops into 'edit mode'.

How can I disable this behavior?

Edit - the problem happens because of 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 that I'm working on)

Note - even though this question has an accepted answer because of the bounty rules, the problem is still not resolved for me.

Answer 1

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

luckily for you you're on jQuery. Doing so cross-browserly with vanilla JS is annoying.

Answer 2

Ripper,

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

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

event: 'dblclick'

Answer 3

UPDATED 2: use children()

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

in responce 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 sake, you can also take advantage by using the handle method!

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

Answer 4

You could try setting contenteditable="false" on these items. Just try adding this attribute in the relevant html tag and see what happend.