javascript - 获取鼠标在区间内的位置以用鼠标移动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);
});

找到的解决方案here不适合我。

Answer 1

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

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");
        }
    }
}

我还没有真正测试过这个，但理论上应该可以满足您的需要。