如何避免在contenteditable <p> JQuery中拖放文本

Question

我需要避免将文本拖放到内容可编辑<p>的示例HTML代码中，如下所示，我的内容可编辑<p>具有单独的<span>如下。

<div class="row">
  <p id="" class="given" contenteditable="true"><span>Lorem</span> <span>trst</span> <span>Lorem</span> <span>Lorem</span> <span>Lorem</span> <span>Lorem</span> </p>
</div>

您可以在此图像中看到，我可以选择文本并将其拖放到另一个位置，我需要避免该可拖动选项。

我看到了几篇关于此的帖子，

Disable drag and drop of selected text

How can I prevent text/element selection with cursor drag

我需要使用jQuery。我该怎么办

Answer 1

尝试一下， 使用dragstart。当用户开始拖动元素或文本选择时，会触发dragstart事件。

$(document).ready(function() {
  $('.given').on('dragstart',function(e) { 
    e.preventDefault(); //disable cut,copy,paste
    console.log('dragable disabled !!');
  });
});