拖動元素至指定區域（原生js實現）（onmousedown、onmousemove、onmouseup）

時間 2020-03-31

標籤拖動元素指定區域原生實現 onmousedown onmousemove onmouseup 欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #container {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: #fff;
        border: 1px solid red;
        box-sizing: border-box;
        margin: 40px 50px 60px 70px;
      }
      #drag {
        position: absolute;
        width: 150px;
        height: 150px;
        border: 1px solid #000;
        background-color: #eee;
        box-sizing: border-box;
        left: 20px;
        top: 30px;
      }
      #drag:hover {
        cursor: move;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <div id="drag"></div>
    <script>
      var drag = document.getElementById("drag");
      var container = document.getElementById("container");
      var dragX = drag.offsetWidth; //拖拽元素盒子寬度
      var dragY = drag.offsetHeight; //拖拽元素盒子高度
      var containerX = container.offsetWidth; //拖拽元素父級盒子寬度
      var containerY = container.offsetHeight; //拖拽元素父級盒子高度
      var initX; //當前元素X
      var initY; //當前元素Y
      var operated = false;
      drag.onmousedown = function(e) {
        offsetX = drag.offsetLeft; //當前元素相對父盒子的X
        offsetY = drag.offsetTop; //當前元素相對父盒子的Y
        operated = !operated;
        initX = e.clientX;
        initY = e.clientY;
        // console.log(offsetX)
        // console.log("initX:"+initX);
        // console.log("initY:"+initY);
      };
      drag.touchstart = function(e) {
        offsetX = drag.offsetLeft; //當前元素相對父盒子的X
        offsetY = drag.offsetTop; //當前元素相對父盒子的Y
        operated = !operated;
        initX = e.clientX;
        initY = e.clientY;
        // console.log(offsetX)
        // console.log("initX:"+initX);
        // console.log("initY:"+initY);
      };
      drag.onmousemove = function(e) {
        e = e || window.event;
        var moveX = e.clientX - initX;
        var moveY = e.clientY - initY;
        // console.log("e.clientX:"+e.clientX); //clientX鼠標移動中實時相對於瀏覽器的X
        // console.log("e.clientY:"+e.clientY);//clientY鼠標移動中實時相對於瀏覽器的Y
        if (operated) {
          var disX = moveX + offsetX;
          var disY = moveY + offsetY;
          if (disX < 0) {
            disX = 0;
          } else if (dragX + disX > containerX) {
            disX = containerX - dragX;
          }
          if (disY < 0) {
            disY = 0;
          } else if (dragY + disY > containerY) {
            disY = containerY - dragY;
          }
          drag.style.left = disX + "px";
          drag.style.top = disY + "px";
        }
      };
      drag.touchmove = function(e) {
        e = e || window.event;
        var moveX = e.clientX - initX;
        var moveY = e.clientY - initY;
        // console.log("e.clientX:"+e.clientX); //clientX鼠標移動中實時相對於瀏覽器的X
        // console.log("e.clientY:"+e.clientY);//clientY鼠標移動中實時相對於瀏覽器的Y
        if (operated) {
          var disX = moveX + offsetX;
          var disY = moveY + offsetY;
          if (disX < 0) {
            disX = 0;
          } else if (dragX + disX > containerX) {
            disX = containerX - dragX;
          }
          if (disY < 0) {
            disY = 0;
          } else if (dragY + disY > containerY) {
            disY = containerY - dragY;
          }
          drag.style.left = disX + "px";
          drag.style.top = disY + "px";
        }
      };
      drag.touchend = function() {
        operated = !operated;
      };
      drag.onmouseup = function() {
        operated = !operated;
      };
    </script>
  </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。