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

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

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

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

获取鼠标内部位置以用鼠标移动div

1 个答案: