Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Cuireadh an snáithe seo sa chartlann. Cuir ceist nua má tá cabhair uait.

BUG Drag-dropping inside a document fails with Uncaught DOMException: The operation is insecure

  • 2 fhreagra
  • 1 leis an bhfadhb seo
  • 68 views
  • Freagra is déanaí ó zeroknight

asq
asq
more options

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:

```

Drag this

```

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: ``` <div id="drag_area"> <div class="list"> <div draggable="true">Drag this</div> </div> <div class="list"> </div> </div> ```

All Replies (2)

asq
asq Úinéir na ceiste
more options

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?

zeroknight
zeroknight
more options

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