获取鼠标在间隔内的位置以使用鼠标移动div

Question

我正在尝试通过鼠标光标的移动来移动div，但无法理解如何在超时范围内获取新更新的鼠标位置。 也许有一种更简单的方法。

var t;
$(document).ready(function(){
    $("body").on("mousedown", ".heading", function (e) {
        $("body").data("header_click", true);

        if ($("body").data("header_click")) {

            var container = $("#dialog");

            container.css("position", "absolute");

            t = setInterval(function(){

                //some way to get mouse position
                var pos = container.position();

                container.css({

                    top: "",//set based on mouse position
                    left: "",//set based on mouse position

                });

            }, 100);    

        }else{
            document.clearInterval(t);
        }

    });
});

$("body").on("mousedown", ".heading", function (e) {
    $("body").data("header_click", false);
});

在这里找到的解决方案对我不起作用。

Answer 1

您将需要绑定到鼠标移动事件并更新文档变量。

var currentMousePos = { x: -1, y: -1 };
$(document).on('mousemove', function(event) {
    currentMousePos.x = event.pageX;
    currentMousePos.y = event.pageY;
});

然后使用相对于要拖动的元素的绝对位置的那些位置来计算和更新元素的新位置。

$(document).ready(function(){
    $("body").on("mousedown", ".heading", function (e) {
        $("body").data("header_click", true);
        if ($("body").data("header_click")) {
            var container = $("#dialog");
            container.css("position", "absolute");

            var containerPos = container.pos();
            var mouseTopOffset = containerPos.top - currentMousePos.y;
            var mouseLeftOffset = containerPos.left - currentMousePos.x;

            container.css("left", mouseTopOffset +"px");
            container.css("top", mouseLeftOffset +"px");
        }
    }
}

我还没有真正测试过，但理论上应该做您所需要的。