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

【问题标题】：Why the div whose parent is draggable, loses its contenteditable attribute?为什么父级可拖动的 div 会丢失其 contenteditable 属性？
【发布时间】：2013-01-19 10:37:26
【问题描述】：

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

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

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

Fiddle Link

【问题讨论】：

其实并没有失去内容可编辑性，只需用中键或右键单击div 即可。似乎 jQuery 在单击左键时会阻止默认操作。
是的，当我用右键单击时，它是可编辑的，但它的解决方案是什么？需要编辑 jQuery UI？
请看这里也许这会对你有所帮助stackoverflow.com/questions/6399131/…
嘿，我不认为我找到了一个有效的解决方案，因为没有任何工作！我想我应该在 2 天后将这个问题添加到赏金中！
@Teemu 是的，我在添加评论时出了点问题

标签： javascript jquery jquery-ui

【解决方案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 的工作演示。

【讨论】：

干得好，但我得到了比这个朋友更好的解决方案：D 但这个解决方案符合我的要求！
@Muhammad - Stackoverflow 是关于给予和接受的。你为什么不发布你的“更好”的解决方案？

【解决方案2】：

这是最好的解决方案： $(. draggable).draggable() .click（函数（）{ $(this).draggable({disabled: true}); }) .模糊（函数（）{ $(this).draggable({disabled: false}); });

【讨论】：