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

Question

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

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,将禁用可拖动的进程.

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