BUG Drag-dropping inside a document fails with Uncaught DOMException: The operation is insecure
When I start to drag a div to drop it in another div on the same page, it fails with the message:
"Uncaught DOMException: The operation is insecure.
dragstart_handler http://127.0.0.1:5000/main.js:7"
This is main.js:
``` function dragstart_handler(event) {
var t = event.target;
while (! t.draggable == "true" && t.tagName != "BODY") {
t = t.parentNode;
};
if (! t.draggable) return;
event.dataTransfer.setData("application/x-moz-node", t);
... ```
All dragging goes inside the same document, so "The operation is insecure" shouldn't happen.
Also I get an empty string when trying to get the draggable data:
``` function drop_handler(event) {
var t = event.target; const parent = t.parentNode; if (parent.id == "drag_area") { event.preventDefault(); const data = event.dataTransfer.getData("application/x-moz-node");
Here's how I assign draggables and drop areas:
``` window.addEventListener("DOMContentLoaded", () => {
const dragArea = document.getElementById("drag_area");
dragArea.addEventListener("dragstart", dragstart_handler);
dragArea.addEventListener("dragover", dragover_handler);
dragArea.addEventListener("dragleave", dragleave_handler);
dragArea.addEventListener("drop", drop_handler);
}); ```
HTML:
```
```
Wšě wotmołwy (2)
PS. I see there is an issue on GitHub
https://github.com/mdn/content/issues/22929
and it's closed, but there is no solution???
Dragging HTML elements on page is a pretty important feature. How comes the bug so major remains unsolved for years?
The documentation is outdated, "application/x-moz-node" does not exist and would be non-standard anyway. The data transfer only needs to identify the element, this can be done with type "text/plain" and then you can append it to the drop zone.
Refer to this example: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData