This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

This thread was archived. Please ask a new question if you need help.

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

  • 2 replies
  • 1 has this problem
  • 3 views
  • Last reply by 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 Question owner
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