Javascript 在firefox中不会触发HTML拖动事件_Javascript_Css_Html_Firefox

Javascript 在firefox中不会触发HTML拖动事件

javascript css html firefox

Javascript 在firefox中不会触发HTML拖动事件,javascript,css,html,firefox,Javascript,Css,Html,Firefox,我有一个表，需要在该表上实现可拖动的标题列。我用Chrome浏览器实现了它，一切正常。当我在Firefox（17.0.1）中测试它时，我注意到，drag事件没有触发dragstart会。我在下面的标记中简化了这个问题。加载到Chrome中时，每次拖动鼠标时，顶部标签都会更新。在Firefox中仍然是0 <!DOCTYPE html> <html> <head> <title>TH Drag Test</title> <script

我有一个表，需要在该表上实现可拖动的标题列。我用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: 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>


TH阻力试验
表，td，th{
边框：实心薄黑色；
}
$（文档）.ready（函数（）{
$（“th”）.bind（“拖动”），函数（事件）{
$（“#lbl”）.html（event.originalEvent.offsetX）；
});
});
0
A列
B栏
一个
两个
三
四

被切断的位

编辑：

这确实有效，但是我还没有找到访问offsetX和offsetY属性的方法，原因是FF版本的事件不包含它们

<!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>


TH阻力试验
表，td，th{
边框：实心薄黑色；
}
函数Init（）{
var n=document.getElementsByTagName（“th”）；
var j=0；
对于（var i=0；i我做了一个恶梦来修复Firefox的这个问题。我需要将一个div拖到日记上，并检测拖放的坐标，以便知道用户选择的日期和时间
为了让drag事件触发，我在dragstart事件处理程序中添加了以下行：
event.dataTransfer.setData('Text', this.id);

然而，最难解决的问题是如何在拖动结束时获得x和y坐标，因为这些坐标不会在Firefox的dragend事件处理程序中返回。我尝试使用上面提到的鼠标事件，但我发现这些在拖动过程中不起作用，只能在调用dragend事件处理程序后调用因此，我只使用dragend事件来检测用户何时释放了div，然后使用next mouse moved事件来获取坐标并执行任何其他需要的工作。我在IE、Firefox和Chrome中发现了这种方法。
以下是演示的html/javascript：
 <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>


请拖我
到这里


var-down=true；
var m_xcoordDrag=0；
var m_ycoordDrag=0；
var m_xcoordMove=0；
var m_ycoordMove=0；
var m_Dragrelied=假；
var m_coordselement=document.getElementById（“coords”）；
var m_compareordselement=document.getElementById（“compareords”）；
移动鼠标的功能（e）{
m_xcoordMove=e.x；
m_ycoordMove=e.y；
m_coordselement.innerHTML=e.x+“，”+e.y；
如果（m_Dragreed）{
m_compareordselement.innerHTML=“X:+m_xcoordDrag+”，“+m_xcoordMove+”Y:+m_ycoordDrag+”，“+m_ycoordMove；
m_dragreeled=假；
}
}
dragstart=函数（事件）{
event.dataTransfer.setData（'Text'，this.id）；
停止=错误；
}
dragend=功能（事件）{
m_Dragrelied=真；
m_xcoordDrag=event.x；
m_ycoordDrag=event.y；
}
document.onmousemove=onmousemove；
var toDrag=document.getElementById（“toDrag”）；
toDrag.addEventListener（'dragstart'，dragstart'）；
toDrag.addEventListener（'dragend'，dragend）；

我希望这有帮助！
Firefox需要在dragstart
事件中设置“something”（这里我们称之为“init”），以初始化要发生的其余拖动事件
这可能是因为所有DOM元素在XUL中默认都是draggable=“true”
（参考：）
例如：
<div id="something" draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'node');">Drag me</div>

拖动我

Chrome不需要这样的“初始化”。
我可以用最新的Chrome和FF在我的系统上确认这种行为。你试过使用较旧的FF版本吗？最近，根据我的经验，FF在从一个“主要”跳转时经常会丢失一些功能另一个版本。我杀了两只小猫是因为你的内联javascript。好吧，这里要记住的重要一点是，是你杀了它们。另外，。我刚刚在Firefox portable 3.6.28中测试了所有这些，但没有一只像预期的那样工作。丹麦的一些东西很糟糕。是的。你需要调用dataTransfer.setData为了触发拖动事件。我没有注意到在FF文档anywherecount_of_years_和_its_仍然_作为_bad_作为_it_used_to_be+=2
中，这是有效的。副作用是设置文本数据将导致浏览器对拖放事件使用默认处理程序。如果目标是触发拖动事件，但不使用浏览器默认拖放ndler选择非标准数据类型而不是Text“设置文本数据将导致浏览器使用默认处理程序…不使用浏览器默认放置处理程序选择非标准数据类型而不是文本”。我遇到了这个确切的问题。我希望这是一个答案，以便我可以向上投票。最终使用了“weorijwefij”而不是“文本”，它现在应该如何工作。
<div id="something" draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'node');">Drag me</div>