javascript - jQueryのドラッグ可能なdivでテキストを選択可能にするにはどうすればよいですか？

Question

jQueryを使用してdivをドラッグ可能にしました。ただし、そのボックスにはテキストが含まれているので、テキストをコピーして貼り付けることができますが、ボックスをクリックしたときにアイテムをドラッグ可能にすると、ボックスが移動し始めますか？

Answer 1

要素をドラッグ可能にする場合は、このオプションを使用します。cancel

指定された要素でドラッグが開始されないようにします。

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

Answer 2

同じ要素でテキストをドラッグして選択できるようにすることは意味がありません。しかし、それが必要だと考え続けると、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：解決策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、ドラッグ可能なプロセスが無効になります。

最初の解決策は適切なものです。