javascript - jeditable 意外触发嵌套项目上的 Draggable

Question

我正在使用 jquery-ui 的 draggable 进行拖放，并且 jeditable用于内联编辑。

当我拖放一个同样可编辑的元素时，jeditable 会立即启动并弹出“编辑模式”。

如何禁用此行为？

编辑 - 问题的发生是因为 netsting - 参见 this example .我还在混合中添加了 draggable 以使示例更加真实(实际真正的问题在我正在处理的 this site 中)

注意 - 尽管由于赏金规则这个问题有一个可接受的答案，但我仍然没有解决这个问题。

Answer 1

更新 2: 使用 children()

演示 2: http://jsbin.com/izaje3/2

回应你的评论

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

演示: http://jsbin.com/ihojo/2

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

或者你可以这样做:

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

假设你有这样的东西:

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

注意:为了方便，您也可以使用 handle 方法来利用!

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