-1

I'm currently working on a contenteditable div. It currently has this default behavior of allowing you to drag pieces of text around.

Chrome/Windows (the only enviroment I tested so far).

enter image description here

How can I disable it? Made a simple snippet for testing below:

#root {
  border: 1px solid silver;
  white-space: pre-wrap;
}
<p>Try selecting a piece of test and drag it around the editable area</p>
<div id="root" contenteditable>Hello World
This is a contenteditable
DIV!
</div>
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
  • My guess: you can't. But my first question would be: why? –  Apr 17 '19 at 07:52
  • @ChrisG I'm building a comment box and I don't want users moving things around. Just found out it's possible. Just listen to the `ondragstart()` event and cancel it by using `event.preventDefault()` – cbdeveloper Apr 17 '19 at 07:58

1 Answers1

1

if you are using jquery. try this.

$('#root').bind('dragover drop', function(event){
  event.preventDefault();
  return false;
});
Syed mohamed aladeen
  • 6,507
  • 4
  • 32
  • 59