javascript - 在内容可编辑的 div 中选择文本，它是 jquery 可拖动的

Question

我有一个 contenteditable div，它是另一个 div 的子元素，使用 jquery 将其制成可拖动元素。

<div id="draggable">
  <div id = "editable" contenteditable="true"/>
</div>

$('#draggable').draggable({revert:true});

我面临的问题是没有禁用任何默认鼠标操作，例如选择文本片段等。此外，如果我尝试选择一些文本，它只会拖拽整个 div。 我试过这样的事情:

$('#editable').mousemove(function(event){
  event.stopPropogation();
})

但这只会阻止任何鼠标拖动操作。它还会阻止文本选择。 我们如何为子内容启用所有内容编辑鼠标操作，同时保持父内容可拖动？

Answer 1

尝试这样的事情:

var draggableDiv = $('#draggable').draggable();

$('#editable', draggableDiv).mousedown(function(ev) {
     draggableDiv.draggable('disable');
}).mouseup(function(ev) {
     draggableDiv.draggable('enable');
});

Fiddle