Question

我使用jQuery创建了一个div draggable。但是，该框中有一些文字，我仍然希望能够复制和粘贴文本，但是当我点击框时我将项目拖得很好，它就开始移动框了？

Answer 1

在使元素可拖动时使用the cancel option。

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

$('.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中选择某个内容时，可拖动的进程将被禁用。

第一个解决方案是合适的解决方案。

如何在jQuery draggable div上选择文本？

2 个答案:

解决方案1：

解决方案2：