jeditable accidentally triggering on Draggable on nested items

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.

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

I found this post because I came across this exact problem (nested jEditable inside a jQuery UI Draggable) today; while I don't think my solution is particularly elegant I felt like I ought to share it in case someone else has the same problem.

Instead of trying to unbind and reinitialize the jEditable on the drag events (which seems to fire the click event AFTER the reinitialization on stop()), I found it easier to set the jEditable to use a custom event which is only triggered on mouseup if the draggable wasn't dragged (simulating a click).

The anonymous function as the first argument of editable should be replaced with the url you're POSTing to if that's 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");
    }
});

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.

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'

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