【Vue版】实现拖拽、排序效果（注意，这个方法在chrome谷歌浏览器上面不适用，dragend会情不自禁触发drag事件先执行，有点像浏览器的一个bug）

<div
 class='dragged'
 :index="$index"
 draggable='true'
 @dragstart="dragstart"
 @drag="drag"
 @dragend="dragend"
</div>

methods: {
    // VUE解决拖拽、排序问题----------------------------------------------------------------
    // 开始拖拽
    dragstart(event) {
      var target = event.target;
      var event = event || window.event; //兼容IE浏览器
      // 鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
      target.diffX = event.clientX - target.offsetLeft;
      target.diffY = event.clientY - target.offsetTop;
    },
    //拖拽中…
    drag(event) {
      var target = event.target;
      target.setAttribute("dragging", "true"); //拖拽过程变成虚线的样子
      var event = event || window.event;
      var x = event.clientX - target.diffX;
      var y = event.clientY - target.diffY;
      if (x < 0) {
        x = 0;
      } else if (x > innerWidth - target.offsetWidth) {
        x = innerWidth - target.offsetWidth;
      }
      if (y < 0) {
        y = 0;
      } else if (y > innerHeight - target.offsetHeight) {
        y = innerHeight - target.offsetHeight;
      }
      target.style.left = x + "px"; //左右拖拽
      target.style.top = y + "px"; //上下拖拽
    },
    //拖拽结束
    dragend(event) {
      var target = event.target;
      target.removeAttribute("dragging"); //取消虚线样式
      var currentIndex = parseInt(target.getAttribute("index")); //被移动的索引
      var targetIndex = this.getSortSequenceBlockIndex(target); //即将移动到的索引
      this.$g.array.jumpQueue([被拖拽的doms数组], currentIndex, targetIndex); //插队
    },
    // ---------------------------------------------------------------- 
    // 获取将会被插入的sequence的block顺序
    getSortSequenceBlockIndex(currentTarget) {
      var shadowDis = 10; //阴影间距
      var arr = [被拖拽的doms数组];
      var currentTargetIndex = parseInt(currentTarget.getAttribute("index"));
      var currentTargetTop = parseInt(currentTarget.style.top);
      for (var i = 0, len = arr.length; i < len; i++) {
        var target  = arr[i];
        if (target) {
          var targetTop = parseInt(target.style.top);
          if (currentTarget != target) {
            if (
              currentTargetIndex === i - 1 &&
              currentTargetTop + currentTarget.offsetHeight + shadowDis <
                targetTop
            )
              return currentTargetIndex; 
            if (currentTargetTop - shadowDis < targetTop + target.offsetHeight)
              return i; 
          }
        }
      }
    },
}

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] {
    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);
  }
  &[animate] {
    transition: 0.618s ease;
  }
}