1. 程式人生 > 其它 >js實現標籤拖動

js實現標籤拖動

// F12,給要拖動的標籤加個id  my_wsh,然後控制執行如下JS即可實現標籤拖放      var box = document.getElementById("my_wsh"); //獲取元素       var x, y; //滑鼠相對與div左邊,上邊的偏移       var isDrop = false; //移動狀態的判斷滑鼠按下才能移動       box.onmousedown = function (e) {          var e = e || window.event; //要用event這個物件來獲取滑鼠的位置          x = e.clientX - box.offsetLeft;          y = e.clientY - box.offsetTop;          isDrop = true; //設為true表示可以移動       }
      document.onmousemove = function (e) {          //是否為可移動狀態                                             if (isDrop) {             var e = e || window.event;             var moveX = e.clientX - x; //得到距離左邊移動距離                                   var moveY = e.clientY - y; //得到距離上邊移動距離             //可移動最大距離             var maxX = document.documentElement.clientWidth - box.offsetWidth;             var maxY = document.documentElement.clientHeight - box.offsetHeight;
            //範圍限定  當移動的距離最小時取最大  移動的距離最大時取最小             //範圍限定方法一             /*if(moveX < 0) {                 moveX = 0             } else if(moveX > maxX) {                 moveX = maxX;             }
            if(moveY < 0) {                 moveY = 0;             } else if(moveY > maxY) {                 moveY = maxY;             } */             //範圍限定方法二              moveX = Math.min(maxX, Math.max(0, moveX));
            moveY = Math.min(maxY, Math.max(0, moveY));             box.style.left = moveX + "px";             box.style.top = moveY + "px";          } else {             return;          }
      }
      document.onmouseup = function () {          isDrop = false; //設定為false不可移動       }