Avatar for Username

সহায়তা খুঁজুন

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.

আরও জানুন

এই থ্রেডটি সংরক্ষিত ছিল। যদি আপনি সাহায্য চান তাহলে অনুগ্রহ করে একটি নতুন প্রশ্ন জিজ্ঞাসা করুন

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

  • 2 উত্তরসমূহ
  • 1 এই সমস্যাটি আছে
  • 20 দেখুন
  • শেষ জবাব দ্বারা 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 প্রশ্নের মালিক
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