HTML拖动事件不会在Firefox中触发 [英] HTML drag event does not fire in firefox
问题描述
我有一个表，我需要实现可拖动的标题列。我使用Chrome作为浏览器来实现它，并且一切正常。当我在Firefox（17.0.1）中测试它时，我注意到 drag 事件不会触发。不过， dragstart 确实如此。我简化了下面标记中的问题。在Chrome中加载时，每拖动一次鼠标就会更新顶部标签。在Firefox中它仍然是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：实心的薄的黑色;
}
< / 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>列A< / th>
< th draggable =true> B列< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td>一个< / td>
< td>两个< / td>
< / tr>
< tr>
< td>三< / td>
< td>四个< / td>
< / tr>
< / tbody>
< / table>
< / body>
< / html>
http://pastebin.com/bD2g3SqL =nofollow> http://pastebin.com/bD2g3SqL
编辑：
这是行得通的，但是我还没找到访问offsetX和offsetY属性的方法，出于某种原因FF版本的事件不包含它们。
<！DOCTYPE html>
< html>
< head>
< title> TH Drag Test< / title>
< style>
table，td，th {
border：实心的薄的黑色;
}
< / style>
< script>
函数Init（）{
var n = document.getElementsByTagName（th）;
var j = 0;
$ b $ for（var i = 0; i
document.getElementById （lbl）。textContent = j ++;
}，false）;
$ b $ for（var i = 0; i
e.dataTransfer.setData（'text / plain'，'node'）;
}，false）;
}
}
< / script>
< / head>
< body onload =Init（）;>
< span id =lbl>< / span>
< table>
< thead>
< tr>
< th draggable =true>列A< / th>
< th draggable =true> B列< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td>一个< / td>
< td>两个< / td>
< / tr>
< tr>
< td>三< / td>
< td>四个< / td>
< / tr>
< / tbody>
< / table>
< / body>
< / html>
显然，您需要做的是初始化拖动（ source ）。
编辑2： / p>
显然，拖动事件（去图）中有一个错误，它不会更新clientX和clientY属性（ source ）。他们在其他一些事件上更新，比如dragover事件，但是这个事件只会在对象被拖动的时候触发超过合理的下降目标。一个出了这样一个愚蠢的情况的方式将是这样粗糙的：
$ p $ <！DOCTYPE html>
< html>
< head>
< title> TH Drag Test< / title>
< style>
table，td，th {
border：实心的薄的黑色;
}
< / style>
< script>
var down = false;
document.onmousemove = OnMouseMove;
函数Init（）{
var n = document.getElementsByTagName（'th'）;
for（var i = 0; i< n.length; i ++）{
n [i] .onmousedown = OnMouseDown;
}
document.onmouseup = OnMouseUp;
}
函数OnMouseDown（e）{
down = true;
}
函数OnMouseUp（e）{
down = false;
函数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>列A< / th>
< th draggable =true> B列< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td>一个< / td>
< td>两个< / td>
< / tr>
< tr>
< td>三< / td>
< td>四个< / td>
< / tr>
< / tbody>
< / table>
< / body>
< / html>
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>
The bit that has been cut out http://pastebin.com/bD2g3SqL
EDIT:
This does work, however I'm yet to find a way to access the offsetX and offsetY properties, for some reason 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, what you need to do is to "initialize" the drag (source.)
EDIT2:
Apparently, there's a bug in the drag event (go figure) which does not update the clientX and clientY properties (source.) They are updated on some other events, like the dragover event, however that event will fire only while the object is being dragged over a plausible drop target. A way out of such a silly situation would be something as crude 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>
这篇关于HTML拖动事件不会在Firefox中触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
