'JavaScript - Prevent cut and paste by drag and drop

I want to prevent the following behavior on a contenteditable div, because it messes with the structure if the div contains any other elements but text nodes.

enter image description here

I have tried the obvious:

  1. Setting draggable="false" on the div
  2. Calling preventDefault on the dragstart and drop events (event listeners also on the div)

However, this does not seem to work and I want to allow regular pasting, so disabling that is not an option.

Any help would be much appreciated. Thanks!



Solution 1:[1]

preventDefault on ondragover should prevent this behaviour.

https://www.w3schools.com/jsref/event_ondragover.asp

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user17255676