javascript - 如何在 jQuery 可拖动 div 上选择文本？

Question

我使用 jQuery 制作了一个可拖动的 div。但是，该框中有一些文本，我仍然希望能够复制和粘贴文本，但是当我单击该框时使一个项目可以很好地拖动时，它会开始移动该框吗？

Answer 1

使元素可拖动时使用该cancel选项。

防止从指定元素开始拖动。

$('.selector').draggable({ cancel: '.text' }); 

Answer 2

允许在同一元素上拖动和选择文本是没有意义的。但是，如果您一直认为这是必要的，我会想到两件事：

解决方案1：

您可以添加一个“处理程序”，它将是接收鼠标向下/向上事件以拖动 div 的唯一子项。例如：

<div id="draggable">
  <div class="handler"></div>
  <div class="text">This is a selectable text</div>
</div>

在您的 JavaScript 代码中：

var draggableDiv = $('#draggable');
draggableDiv.draggable({
  handle: $('.text', draggableDiv)
});

解决方案2：

当用户尝试选择文本时，您可以禁用可拖动的东西：

<div id="draggable">
  <div class="text">This is a text</div>
</div>

在您的 JavaScript 代码中：

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

当有人试图在 中选择某些东西时.text，可拖动过程被禁用。

第一个解决方案是正确的。