Question

我正在尝试为jquery创建一个draggabble插件，它看起来像：

(function($){   
$.fn.drag = function(){

    var element = this;

    $(element).mousedown(function(){

        $(window).bind("mousemove",function(e){
            $(element).css({"position" : "absolute"});
            $(window).css({"-webkit-user-select": "none"});

            var pos = $(element).position();


            $(element).css({"left" : e.pageX+"px"});
        });
    });
};
})(jQuery);

但是当mousemove（）发生时，div会进入光标位于其左上角的位置。它工作，但只能从div的左上角。所以我的问题是如何编写css代码，所以当我按下鼠标按钮并开始在屏幕上移动光标时，拖动只发生在拍摄位置。 jQuery UI做到了，但我在他们的代码中找不到它。希望你能理解。提前谢谢！

Answer 1

从这个jQuery tutorial开始，您只需要使用与当前元素相关的元素偏移量。

var x = e.pageX - this.offsetLeft;

而不是css()

$(element).css({
            "left": (e.pageX - x) + "px"
          });

jsfiddle上的代码示例。

Answer 2

您将不得不根据光标在元素中的位置来抵消它。

jQuery鼠标在div位置

2 个答案: