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

//初始化需要拖拽的列    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 t = this;      var dragged = typeof sel === "string" ? document.querySelector(sel) : sel;      dragged.draggable = true; //开启拖拽属性      // 开始拖拽      dragged.ondragstart = function(event) {        if (this.hasAttribute("expend")) {          this.removeAttribute("expend");          t.entityItems = []; //清空Entity数据          t.attributeItems = []; //清空Attribute列的数据          t.rangeItems = []; //清空range列的数据        }        var event = event || window.event; //兼容IE浏览器        // 鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离        this.diffX = event.clientX - this.offsetLeft;        this.diffY = event.clientY - this.offsetTop;      };      //拖拽中…      dragged.ondrag = function(event) {        this.setAttribute("dragging", "true"); //拖拽过程变成虚线的样子        var event = event || window.event;        var x = event.clientX - this.diffX;        var y = event.clientY - this.diffY;        if (x < 0) {          x = 0;        } else if (x > innerWidth - this.offsetWidth) {          x = innerWidth - this.offsetWidth;        }        if (y < 0) {          y = 0;        } else if (y > innerHeight - this.offsetHeight) {          y = innerHeight - this.offsetHeight;        }        this.style.left = x + "px"; //左右拖拽        this.style.top = y + "px"; //上下拖拽      };      //拖拽结束      dragged.ondragend = function(event) {        this.removeAttribute("dragging"); //取消虚线样式      };    },

div.dragged {   /*禁止选中文本*/  -moz-user-select: none;  -webkit-user-select: none;  -ms-user-select: none;  -khtml-user-select: none;  user-select: none;  cursor: grab !important;  &:active {    z-index: 1;    cursor: grabbing !important;    opacity: .618;  }  &[dragging] {    cursor: grabbing !important;    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://pfxaf.baihongyu.com/