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

Question

我使用 jquery-ui 的 Draggable 进行拖放，使用 jeditable 进行内联编辑。

当我拖放一个也可编辑的元素时，在它被放置后，jeditable 立即启动并弹出到“编辑模式”。

我怎样才能禁用这种行为？

编辑 - 由于netsting而出现问题 - 请参阅此示例。我还添加了 Draggable 到混合中，使示例更加真实（实际的真正问题是在 这个网站 中，我是正在处理）

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

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')
        }
    });
});​

DEMO: 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>  

注意：只是为了方便，你也可以通过使用处理方法！

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

Answer 2

我发现这篇文章是因为我今天遇到了这个确切的问题（将 jEditable 嵌套在 jQuery UI Draggable 中）；虽然我不认为我的解决方案特别优雅，但我觉得我应该分享它，以防其他人遇到同样的问题。

我发现将 jEditable 设置为使用仅在 mouseup 时触发的自定义事件更容易未拖动可拖动对象（模拟单击）。

如果您喜欢的话，作为 editable 第一个参数的匿名函数应该替换为您要发布到的 url。

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，您应该尝试在放置处理程序中获取 Event 对象，然后尝试调用 event.preventDefault()、event.stopImmediatePropagation( ) 或 event.stopPropagation()

幸运的是，您使用的是 jQuery。使用 vanilla JS 跨浏览器这样做很烦人。

Answer 4

Ripper，

一种可能的解决方法是对 jEditable 组件使用双击事件。

为此，只需使用以下选项初始化 jEditable 对象：

event: 'dblclick'

Answer 5

您可以尝试在这些项目上设置 contenteditable="false"。
只需尝试在相关 html 标签中添加此属性，看看会发生什么。