拖动元素至指定区域（原生js实现）（onmousedown、onmousemove、onmouseup）

<!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>
拖动元素至指定区域（原生js实现）（onmousedown、onmousemove、onmouseup）

MandyShen

引用和评论

数组相关实现

100个React最佳实践小技巧

前端如何入门 Go 语言

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具
