本文共 2627 字，大约阅读时间需要 8 分钟。

以下方式的劣势就是在放弃拖拽那一刻会触发click事件，通常如果被拖拽元素还有其他点击事件，会重复触发，往往并非业务需求。优势就是…额…貌似这段代码没什么屌优势！ 

// 初始化需要拖拽的列    initDrags() {      var arr = document.querySelectorAll(".dragged");      for (var i = 0, len = arr.length; i < len; i++) {        var a = arr[i];        this.drag(a);      }    },    // js原生实现拖拽效果    drag(sel) {      var dragged = typeof sel === "string" ? document.querySelector(sel) : sel;      // 点击某物体时，用drag对象即可，move和up是全局区域，      // 也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)      dragged.onmousedown = function(event) {        var event = event || window.event; //兼容IE浏览器        // 鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离        var diffX = event.clientX - dragged.offsetLeft;        var diffY = event.clientY - dragged.offsetTop;        if (typeof dragged.setCapture !== "undefined") {          dragged.setCapture();//防止拖拽的时候鼠标离开了div范围就没办法移动了        }//这个地方一般不建议直接用document，最好用document.querySelector("容器"),以免和其他子元素的onmousemove冲突,但是务必确保移动范围是在容器范围内，否则出界就无法移动了        document.onmousemove = function(event) {          dragged.setAttribute("dragging", "true"); //拖拽过程变成虚线的样子          var event = event || window.event;          var x = event.clientX - diffX;          var y = event.clientY - diffY;          if (x < 0) {            x = 0;          } else if (x > window.innerWidth - dragged.offsetWidth) {            x = window.innerWidth - dragged.offsetWidth;          }          if (y < 0) {            y = 0;          } else if (y > window.innerHeight - dragged.offsetHeight) {            y = window.innerHeight - dragged.offsetHeight;          }          dragged.style.left = x + "px";//左右拖拽          dragged.style.top = y + "px";//上下拖拽        };//这个地方一般不建议直接用document，最好用document.querySelector("容器"),以免和其他子元素的onmouseup冲突,但是务必确保移动范围是在容器范围内，否则出界就无法松开了        document.onmouseout = document.onmouseup = function(event) {          dragged.removeAttribute("dragging"); //取消虚线样式          this.onmousemove = null;          this.onmouseup = null;          //修复低版本ie bug          if (typeof dragged.releaseCapture != "undefined") {            dragged.releaseCapture();          }        };      };    },

div.dragged {   /*禁止选中文本*/  -moz-user-select: none;  -webkit-user-select: none;  -ms-user-select: none;  -khtml-user-select: none;  user-select: none;  cursor: grab;  &:active {    z-index: 1;    cursor: grabbing;    opacity: .618;  }  &[dragging] {    cursor: grabbing;    background: white !important;    border: 1px dashed gray !important;    color: gray !important;    opacity: 0.9 !important;    transform: translate(-3px, -3px);    box-shadow: 5px 10px 0 rgba(0, 0, 0, 0.05);  }}

转载地址：http://sfxaf.baihongyu.com/