javascript – 在Firefox中不会触发HTML拖动事件

我有一个表,我需要实现可拖动的标题列.我使用Chrome作为浏览器实现了它,一切正常.当我在Firefox(17.0.1)中测试它时,我注意到拖动事件不会触发.但是,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>

解决方法

被削减的位 http://pastebin.com/bD2g3SqL

编辑：

这确实有效,但是我还没有找到一种方法来访问offsetX和offsetY属性,由于某种原因,事件的FF版本不包含它们.

<!DOCTYPE html>
<html>
<head>
<title>TH Drag Test</title>
<style>
table,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>

显然,你需要做的是“初始化”阻力(source.)

EDIT2：

显然,拖动事件(go figure)中存在一个错误,它不会更新clientX和clientY属性(source).它们会更新其他一些事件,例如dragover事件,但是该事件只会在对象出现时触发拖过一个看似合理的下落目标.走出这种愚蠢局面的方法就像这样粗暴：

<!DOCTYPE html>
<html>
<head>
<title>TH Drag Test</title>
<style>
table,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>

javascript – 在Firefox中不会触发HTML拖动事件

解决方法

猜你在找的JavaScript相关文章