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

Question

我正在使用jquery-ui的draragable进行拖放,并且可以进行内联编辑.

当我拖放一个也可编辑的元素时,在它被删除之后立即开始并弹出"编辑模式".

如何禁用此行为？

编辑 - 由于netsting而发生问题 - 请参阅此示例.我还添加了draggable混合,使示例更加真实(实际的真正问题是在我正在处理的这个网站)

注意 - 即使这个问题由于赏金规则而得到了接受的答案,但问题仍未解决.

Answer 1

更新2:使用儿童()

演示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