javascript - 为什么父级可拖动的 div 会丢失其 contenteditable 属性？

Question

我有一个子 div，其父 div 可拖动，内容可编辑设置为 true。我正在使用 jQuery UI 使其父 div 可拖动，但子 div 失去其 contenteditable 属性。

我的问题是为什么那个孩子 div 会表现出这种行为？

$(".draggable").draggable();

小提琴链接

Answer 1

我不确定编辑和拖动是否可以同时发生。无论如何，您可以在单击可编辑区域时取消拖动：

$(".editable").on("mousedown", function (e) {
    e.stopPropagation();
    return;
});

要扩大可拖动区域，您需要缩小可编辑区域，如下所示：

.editable {
    max-width:190px;
    height:20px;
    border: 1px solid #f00;
    padding:1px;
    display: inline-block;
}

jsFiddle的工作演示。

Answer 2

这是最好的解决方案： $( . draggable).draggable() .click(function() { $(this).draggable({disabled: true}); }) .blur(function() { $(this).draggable( {禁用：假}); });