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

【问题标题】：jeditable accidentally triggering on Draggable on nested itemsjeditable 意外触发嵌套项目上的 Draggable
【发布时间】：2010-04-27 21:26:50
【问题描述】：

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

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

如何禁用此行为？

编辑 - 问题是由于网刺造成的 - 请参阅 this example。我还添加了可拖动以使示例更真实（实际真正的问题在我正在处理的this site 中）

注意 - 尽管由于赏金规则，这个问题得到了公认的答案，但我仍然没有解决这个问题。

【问题讨论】：

我看了标题有“绝地表”

标签： javascript jquery jquery-ui draggable jeditable

【解决方案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

【讨论】：

看起来您的演示正在运行，酷！我尚未将您的解决方案集成到我自己的代码库中，我会尽快接受。
确定我已经在所有 win 浏览器中测试过了！ ;) 无论如何在本地尝试一下，因为 jsbin 有时会在某些浏览器上很糟糕！
我的代码似乎还有其他问题 - 请参阅这个有效的示例，尽管我不再取消绑定该方法：jsbin.com/ihojo/23
我遇到的问题是因为嵌套 - 它不是可编辑和可拖动的相同元素：jsbin.com/izaje3
抱歉打扰了，但是当我尝试应用到我的代码时，我仍然没有让它工作:(我不明白为什么你的例子首先有效 - 由当你调用 $(this).removeClass('editable') 时，jQuery 已经添加了钩子，所以现在“为时已晚”。这是我的非工作示例：jsbin.com/izaje3/5 我更新了我的示例 a

【解决方案2】：

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

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

作为可编辑的第一个参数的匿名函数应该替换为您要发布到的 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");
    }
});

【讨论】：

【解决方案3】：

oftomh，您应该尝试在 drop 处理程序中获取 Event 对象，然后尝试调用 event.preventDefault()、event.stopImmediatePropagation() 或 event.stopPropagation()

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

【讨论】：

当可拖动对象和可编辑对象是同一个对象时，问题似乎不会发生（请参阅@aSeptik 的回答）。这是我的问题的一个活生生的例子：jsbin.com/izaje3

【解决方案4】：

开膛手，

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

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

event: 'dblclick'

【讨论】：

这违背了目的，我绝对需要点击一下触发器。

【解决方案5】：

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

【讨论】：