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

Question

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?

Answer 1

Use the cancel option when making the element draggable.

Prevents dragging from starting on specified elements.

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

Answer 2

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:

Solution 1:

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>

And in your JavaScript code:

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

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>

And in your JavaScript code:

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

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

The first solution is the proper one.

Answer 3

(As talked by the other 2 answers, but if you need an practical example, here it is (if I understood correctly): )

jsfiddle: Draggable demo

The point is to:_

1. add an extra child <span> as an dragHandler , in the (parent) <span> that you want to drag.

<span class="commentNt" id="commentDraggable_123">~//? was it not &quot;single bounded context&quot; in choreography?<br/>
  <span class="dragHandler">Drag</span></span>

2. for the parent <span> , use following code to register that child <span> for dragging

   • (dragging will now only be triggered in child <span> 's region).

$('#commentDraggable_123').draggable({ handle: '.dragHandler' }); 

3. now, only dragging the child <span> , the whole parent <span> will then be dragged along with.

---

As for:

• Q: Can I do this without introducing another child <span> inside the parent <span> ?

  • ie: Can I just drag the "blank area", then the whole parent <span> is dragged;

    while I drag on the "text area", the text can be selected instead of being dragged?

• A: idk, I hope there is a way.