Geek Answers Handbook

HTML drag and drop event does not fire in firefox

I have a table on which I need to implement draggable header columns. I implemented it using Chrome as a browser and everything worked fine. When I tested it in Firefox (17.0.1), I noticed that the drag event did not fire. dragstart , however. I simplified the problem in the markup below. When loading in Chrome, the top mark is updated every time the mouse moves when dragging. In Firefox, it remains 0.

 <!DOCTYPE html> <html> <head> <title>TH Drag Test</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <style> table,td,th { border: solid thin black; } </style> <script> $(document).ready(function() { $("th").bind("drag", function(event) { $("#lbl").html(event.originalEvent.offsetX); }); }); </script> </head> <body> <span id="lbl">0</span> <table> <thead> <tr> <th draggable="true">Column A</th> <th draggable="true">Column B</th> </tr> </thead> <tbody> <tr> <td>One</td> <td>Two</td> </tr> <tr> <td>Three</td> <td>Four</td> </tr> </tbody> </table> </body> </html>
+7
source share
3 answers

bit that was cut out http://pastebin.com/bD2g3SqL

EDIT:

This works, however, I have not yet found a way to access the offsetX and offsetY properties, for some reason the FF version of the event does not contain them.

 <!DOCTYPE html> <html> <head> <title>TH Drag Test</title> <style> table,td,th { border: solid thin black; } </style> <script> function Init(){ var n= document.getElementsByTagName("th"); var j=0; for (var i=0; i<n.length; i++){ n[i].addEventListener('drag', function (e){ document.getElementById("lbl").textContent= j++; }, false); } for (var i=0; i<n.length; i++){ n[i].addEventListener('dragstart', function (e){ e.dataTransfer.setData('text/plain', 'node'); }, false); } } </script> </head> <body onload="Init();"> <span id="lbl"></span> <table> <thead> <tr> <th draggable="true">Column A</th> <th draggable="true">Column B</th> </tr> </thead> <tbody> <tr> <td>One</td> <td>Two</td> </tr> <tr> <td>Three</td> <td>Four</td> </tr> </tbody> </table> </body> </html>

Apparently you need to “initialize” the drag and drop ( source .)

EDIT2:

Apparently, there is an error in the drag (go figure) event that does not update the clientX and clientY ( source .) Properties. They are updated in some other events, such as the dragover event, however this event will fire only when the object is dragged over the believable goals. Getting out of such a stupid situation would be as rude as this:

 <!DOCTYPE html> <html> <head> <title>TH Drag Test</title> <style> table,td,th { border: solid thin black; } </style> <script> var down= false; document.onmousemove= OnMouseMove; function Init(){ var n= document.getElementsByTagName('th'); for (var i=0; i<n.length; i++){ n[i].onmousedown= OnMouseDown; } document.onmouseup= OnMouseUp; } function OnMouseDown(e){ down= true; } function OnMouseUp(e){ down= false; } function OnMouseMove(e){ if (!down) return; document.getElementById('lbl').textContent= e.pageX ? ('x: ' + e.pageX + ' y: ' + e.pageY) : ('x: ' + (e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft) + ' y: ' + (e.clientY + document.documentElement.scrollTop + document.body.scrollTop)); } </script> </head> <body onload="Init();"> <span id="lbl"></span> <table> <thead> <tr> <th draggable="true">Column A</th> <th draggable="true">Column B</th> </tr> </thead> <tbody> <tr> <td>One</td> <td>Two</td> </tr> <tr> <td>Three</td> <td>Four</td> </tr> </tbody> </table> </body> </html>
+5
source

I had nightmares fixing this problem for Firefox. I needed to drag the div into the diary and determine the coordinates of the fall, so that I know what date and time the user chose.

To get the drag event, I added the bottom line to the dragstart event handler:

 event.dataTransfer.setData('Text', this.id);

However, the hardest part was figuring out how to get the x and y coordinates at the end of the drag, since they did not return to the dragend event handler in Firefox. I tried using mouse events, as mentioned above, but I found that they did not work while dragging and dropping, and only got called after the dragend event handler was called. So I used the dragend event to detect when the user issued the div, and then used the following mouse movement to get the coordinates and do any other work that is required. I found this to work in IE, Firefox and Chrome. Here is the html / javascript demo:

  <div> <div id = "todrag" class = "testdiv" draggable="true"><p>Please drag me</p></div> <div id = "destination" class = "testdiv"><p>To here</p></div> <p id = "coords"></p> <p id = "compareords"></p> </div> <script> var down = true; var m_xcoordDrag = 0; var m_ycoordDrag = 0; var m_xcoordMove = 0; var m_ycoordMove = 0; var m_dragReleased = false; var m_coordselement = document.getElementById("coords"); var m_compareordselement = document.getElementById("compareords"); function OnMouseMove(e) { m_xcoordMove = ex; m_ycoordMove = ey; m_coordselement.innerHTML = ex + "," + ey; if (m_dragReleased) { m_compareordselement.innerHTML = "X:" + m_xcoordDrag + ", " + m_xcoordMove + " Y:" + m_ycoordDrag + ", " + m_ycoordMove; m_dragReleased = false; } } dragstart = function (event) { event.dataTransfer.setData('Text', this.id); stop = false; } dragend = function (event) { m_dragReleased = true; m_xcoordDrag = event.x; m_ycoordDrag = event.y; } document.onmousemove = OnMouseMove; var toDrag = document.getElementById("todrag"); toDrag.addEventListener('dragstart', dragstart); toDrag.addEventListener('dragend', dragend); </script>

Hope this helps!

+5
source

Firefox requires “something” (here we call “init”) that must be set in the dragstart to trigger the rest of the drag events.

This is probably because all DOM elements are by default equal to draggable="true" in XUL. (link: https://bugzilla.mozilla.org/show_bug.cgi?id=646823#c4 )

Example:

 <div id="something" draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'node');">Drag me</div>

Chrome does not require such an “initialization”.

+1
source

More articles:


All Articles