先看效果：

128f0fab-9995-47d1-9021-a5512b4a296a.gif

主要知識點(diǎn)還是HTML的API（Drag和Drop），詳情看這里HTML 拖放 API - Web API 接口參考 | MDN

下面看代碼：

• template

<Checkbox
  class="hold"
  draggable="true"
  v-for="(item, index) in specificationList"
  :key="index"
  :class="{'hold-active': index === enterIndex, 'drag-active': index === dragIndex}"
  @drag.native="handleDrag"
  @dragover.native.prevent="handleDragover"
  @dragstart.native="handleDragstart(index)"
  @dragenter.native="handleDragenter(index)"
  @dragleave.native="handleDragleave"
  @drop.native.prevent="handleDrop"
>
  {{ item }}
</Checkbox>

• script

data() {
  return {
    specificationList: ['大小', '顏色', '尺碼', '重量', '尺寸'],
    dragIndex: '',  // 當(dāng)前拖動(dòng)元素的index
    enterIndex: ''  // 拖動(dòng)進(jìn)入該元素的index
  }
},

methods: {
  // 拖動(dòng)事件
  handleDrag() {
    // console.log('drag')
  },

  handleDragover() {
    // 不能少并且要阻止默認(rèn)行為，不然觸發(fā)不了drop事件
  },

  // 拖動(dòng)開始
    handleDragstart(index) {
    this.dragIndex = index;
  },

  // 拖動(dòng)進(jìn)入
  handleDragenter(index) {
    this.enterIndex = index;
  },

  // 拖動(dòng)離開
  handleDragleave(){
    // this.enterIndex = '';
  },

  // 放開
  handleDrop() {
    const dropObj = this.specificationList[this.dragIndex];

    // 判斷拖拽元素位置和目標(biāo)位置的前后順序
    if (this.enterIndex >= this.dragIndex ) {
      this.specificationList.splice(this.enterIndex + 1, 0, dropObj);
      this.specificationList.splice(this.dragIndex, 1);
    } else {
      this.specificationList.splice(this.enterIndex, 0, dropObj);
      this.specificationList.splice(this.dragIndex + 1, 1);
    }
    this.enterIndex = '';
    this.dragIndex = '';
    }
}

• style

.hold {
  padding: 3px 5px;
  border: 1px dashed transparent;
  border-radius: 3px;
  box-sizing: border-box;
}

.hold-active {
  border: 1px dashed $baseColor;
}

.drag-active {
  opacity: .5;
}