js拖拽功能的實現

如果要設置物體拖拽，那么必須使用三個事件，並且這三個事件的使用順序不能顛倒。

1.onmousedown：鼠標按下事件

2.onmousemove:鼠標移動事件

3.onmouseup:鼠標抬起事件

   拖拽的基本原理就是根據鼠標的移動來移動被拖拽的元素。鼠標的移動也就是x、y坐標的變化；元素的移動就是style.position的top和left的改變。當然，並不是任何時候移動鼠標都要造成元素的移動，而應該判斷鼠標左鍵的狀態是否為按下狀態，是否是在可拖拽的元素上按下的。

基本思路如下：

拖拽狀態 = 0鼠標在元素上按下的時候{
      拖拽狀態 = 1
      記錄下鼠標的x和y坐標
      記錄下元素的x和y坐標
}
鼠標在元素上移動的時候{
      如果拖拽狀態是0就什么也不做。
      如果拖拽狀態是1，那么
      元素y = 現在鼠標y - 原來鼠標y + 原來元素y
      元素x = 現在鼠標x - 原來鼠標x + 原來元素x
}
鼠標在任何時候放開的時候{
       拖拽狀態  = 0
}

原聲js實現拖拽功能

1.給個div，給定一些樣式

<div class="drag" style="left:0;top:0;width:100px;height:100px">按住拖動</div>

 

<style>
        .drag {
            background-color: skyblue;
            position: absolute;
            line-height: 100px;
            text-align: center;
        }
 </style>

// 獲取DOM元素  
      let dragDiv = document.getElementsByClassName("drag")[0];
      // 鼠標按下事件 處理程序
      let putDown = function (event) {
          dragDiv.style.cursor = "pointer";
          let offsetX = parseInt(dragDiv.style.left); // 獲取當前的x軸距離
          let offsetY = parseInt(dragDiv.style.top); // 獲取當前的y軸距離
          let innerX = event.clientX - offsetX; // 獲取鼠標在方塊內的x軸距
          let innerY = event.clientY - offsetY; // 獲取鼠標在方塊內的y軸距
          // 按住鼠標時為div添加一個border
          dragDiv.style.borderStyle = "solid";
          dragDiv.style.borderColor = "red";
          dragDiv.style.borderWidth = "3px";
          // 鼠標移動的時候不停的修改div的left和top值
          document.onmousemove = function (event) {
              dragDiv.style.left = event.clientX - innerX + "px";
              dragDiv.style.top = event.clientY - innerY + "px";
              // 邊界判斷
              if (parseInt(dragDiv.style.left) <= 0) {
                  dragDiv.style.left = "0px";
              }
              if (parseInt(dragDiv.style.top) <= 0) {
                  dragDiv.style.top = "0px";
              }
              if (parseInt(dragDiv.style.left) >= window.innerWidth - parseInt(dragDiv.style.width)) {
                  dragDiv.style.left = window.innerWidth - parseInt(dragDiv.style.width) + "px";
              }
              if (parseInt(dragDiv.style.top) >= window.innerHeight - parseInt(dragDiv.style.height)) {
                  dragDiv.style.top = window.innerHeight - parseInt(dragDiv.style.height) + "px";
              }
          }
          // 鼠標抬起時，清除綁定在文檔上的mousemove和mouseup事件
          // 否則鼠標抬起后還可以繼續拖拽方塊
          document.onmouseup = function () {
              document.onmousemove = null;
              document.onmouseup = null;
              // 清除border
              dragDiv.style.borderStyle = "";
              dragDiv.style.borderColor = "";
              dragDiv.style.borderWidth = "";
          }
      }
      // 綁定鼠標按下事件
      dragDiv.addEventListener("mousedown", putDown, false);

 

轉自：https://www.jb51.net/article/138406.htm

轉自：https://www.cnblogs.com/cb1490838281/p/9767261.html