如何避免在 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 !!');
  });
});