1

マウス カーソルの動きに合わせて 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);
});

ここで見つかった解決策は私にはうまくいきませんでした。

4

1 に答える 1

0

マウス移動イベントにバインドし、ドキュメント変数を更新する必要があります。

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

私はこれを実際にテストしていませんが、理論的には必要なことを行う必要があります。

于 2013-10-04T19:08:39.840 に答える