jQuery Drag仅在Chrome中有效

Question

我不想使用jQuery UI，所以我尝试自己制作一个jQuery拖动脚本。

这基本上是我的水平拖动代码：

var down = false;

$('#itemToMove').mousedown(function(e){
    down = true;
    left = event.pageX - $(this).offset().left;
});

$(document).mouseup(function(){
    down = false;
});

$(document).mousemove(function(e){
    if(down){
        var X = event.pageX - left;
        $('#itemToMove').css({
            left: X
        });
    }
});

我在Chrome浏览器中的工作非常出色，但在其他浏览器（尝试过KHTML，Trident和Gecko）中却无法使用。 有人可以告诉我为什么吗？

Answer 1

我非常确定，如果将alert（“”）放入mousedown事件处理程序中，它将永远不会触发。 这是因为当您尝试将事件处理程序绑定到对象的mousedown事件时，该对象（您的div）尚不存在。 尝试将整个代码块包装在

$（document）.ready（function（）{//您的代码在这里}）;

像这样：

    var down = false;
    var left = 0;

    $(document).ready(function()
        {
        $('#itemToMove').mousedown(function(e)
            {
            down = true;
            left = e.pageX - $(this).offset().left;
            });

        $(document).mouseup(function()
            {
            down = false;
            });

        $(document).mousemove(function(e)
            {
            if(down)
                {
                var X = e.pageX - left;
                $('#itemToMove').css(
                    {
                    left: X
                    });
                }
            });
        });

希望能帮助到你 ：]

补充：另外，请确保您略过本文档： http : //api.jquery.com/ready ，尤其是以下部分：

注意：请确保所有样式表都包括在脚本之前（尤其是那些调用ready函数的样式表）。 这样做将确保在开始执行jQuery代码之前正确定义所有元素属性。 否则，将导致零星的问题，尤其是在基于WebKit的浏览器（例如Safari）上。