How to avoid text drag and drop inside contenteditable JQuery

Question

I need to avoid drag and drop text inside content editable <p> My sample HTML code as follows,My content editable <p> have separate <span> as follows.

<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>

You can see in this image, I can select text and drag and drop it inside to another place, I need to avoid that draggable option.

I saw several post regarding on this,

Disable drag and drop of selected text

How can I prevent text/element selection with cursor drag

I need to do this using jQuery. How can I do it

Answer 1

Try this, Use dragstart. The dragstart event is fired when the user starts dragging an element or text selection.

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