先看效果：
128f0fab-9995-47d1-9021-a5512b4a296a.gif
主要知识点还是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: '', // 当前拖动元素的index
enterIndex: '' // 拖动进入该元素的index
}
},
methods: {
// 拖动事件
handleDrag() {
// console.log('drag')
},
handleDragover() {
// 不能少并且要阻止默认行为，不然触发不了drop事件
},
// 拖动开始
handleDragstart(index) {
this.dragIndex = index;
},
// 拖动进入
handleDragenter(index) {
this.enterIndex = index;
},
// 拖动离开
handleDragleave(){
// this.enterIndex = '';
},
// 放开
handleDrop() {
const dropObj = this.specificationList[this.dragIndex];
// 判断拖拽元素位置和目标位置的前后顺序
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;
}
