如何在jQuery draggable div上选择文本？ [英] How do you make text selectable on a jQuery draggable div?

问题描述

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

I made a div draggable using jQuery. However, there is some text in that box, and I would still like to be able to copy and paste the text, but when I make an item draggable well when I click on the box it starts to move the box?

推荐答案

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

It doesn't make sense to allow dragging AND selecting text on the same element. However, if you keep thinking it's necessary, two things come to my mind:

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

You can add a "handler" that will be the only child receiving the mouse down/up events to drag the div. For instance:

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

在您的JavaScript代码中：

And in your JavaScript code:

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

解决方案2：

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

Solution 2:

You can disable the draggable thing when a user try to select text:

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

在您的JavaScript代码中：

And in your JavaScript code:

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

当有人试图在 .text ，可拖动的进程被禁用。

When someone tries to select something in .text, the draggable process is disabled.

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

The first solution is the proper one.

这篇关于如何在jQuery draggable div上选择文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！