隨鼠標移動的窗口

//html
<div id="box" style="width: 100px; height: 100px;position:absolute; background: red">
    會隨鼠標移動的窗口
</div>
//js
var oDiv = document.getElementById("box");

      oDiv.onmousedown = function(e) {
            var x = e.clientX;
            var y = e.clientY;  //獲取鼠標指針坐標
            var l = oDiv.offsetLeft;
            var t = oDiv.offsetTop; //獲取自身div的大小
         // 得出移動時的坐標
        var L = x - l, T = y - t;
        
        document.onmousemove = function(e) {
              var moveX = e.clientX ;//移動的坐標
              var moveY = e.clientY;
              oDiv.style.left = moveX - L;
              oDiv.style.top = moveY - T;  
          }
      }
// 鼠標松開
      oDiv.onmouseup = function() {
               document.onmousedown = null;
               document.onmousemove= null;
      }
//jq

     $(function() {
        $("#box").mousedown(function(e) {

            var l = parseInt($("#box").css("left"));
            var t = parseInt($("#box").css("top"));

            var L = e.pageX - l;
            var T = e.pageY - t;
            console.log(L + "||" + T)

            $("#box").bind("mousemove", function(e) {
                var moveX = e.pageX - L;
                var moveY = e.pageY - T;
                $("#box").css({
                    "left": moveX,
                    "top": moveY
                });
            })
        });

        $("#box").mouseup(function() {

            $("#box").unbind("mousemove")
        });
     });

另一種簡單的jq方法

    $(function() {
        $("#box").mousedown(function(e) {
            /*var l = parseInt($("#box").css("left"));
            var t = parseInt($("#box").css("top"));
            var L = e.pageX - l;
            var T = e.pageY - t; */

            $("#box").bind("mousemove" ,function(e) {
                $("#box").css({
                    "left": e.pageX + "px",
                    "top" : e.pageY + "px"
                              /*"left": e.pageX - L + "px",
                    "top" : e.pageY - T + "px"*/
                })
            });
        });
        $("#box").mouseup(function() {
            $("#box").unbind("mousemove");
        });
     })

他們之間有差異,第二種是鼠標點擊就直接移動到鼠標的位置,
注意,移動的距離:鼠標最后停止的位置 - 初始的位置(即鼠標位置減自身的大小,)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容