Menu
I have a table on which I need to implement draggable header columns. I implemented it using Chrome as my browser, and everything worked fine. When I tested it in Firefox (17.0.1), I noticed that the drag event doesn't fire. dragstart does, though. I simplified the problem in the markup below. When loaded in Chrome, the top label updates each time the mouse moves while 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>
693
I had nightmares fixing this issue for Firefox. I needed to drag a div onto a diary and detect the coordinates of the drop so I knew which date and time the user had selected.
To get the drag event to fire I added the below line to the dragstart event handler:
event.dataTransfer.setData('Text', this.id);
However, the hardest thing to work out was how to get the x and y coordinates when the drag ended, as these are not returned in the dragend event handler in Firefox. I tried using mouse events as mentioned above, but I found that these did not work while the drag is in progress and are only called after the dragend event handler has been called. So, I only used the dragend event to detect when the user had released the div, and then used the next mouse moved event to get the coordinates and do any other work that is required. I found this works in IE, Firefox and Chrome. Here is the html / javascript of a 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 = e.x;
m_ycoordMove = e.y;
m_coordselement.innerHTML = e.x + "," + e.y;
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>
I hope this helps!
194
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
