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

我非常确定，如果您在 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" jquery.com/ready，特别是以下部分：

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