vue 拖动事件

元素添加 :draggable="true"

@dragend="dragend($event, index)" //拖动结束触发事件

@dragenter="dragenter($event, index)" //拖动进入元素触发事件

@dragover="dragover($event, index)"//拖动覆盖元素松开触发事件

@dragstart="dragstart(index)" //拖动开始触发事件

<div style="width: 140px;float: left;line-height: 33px;height: 33px;margin-right: 8px;" v-for="(item,index)  in exportcheckedKeyss"
@dragend="dragend($event, index)" @dragenter="dragenter($event, index)" @dragover="dragover($event, index)"
@dragstart="dragstart(index)" :draggable="true" id=""
>
{{index+1}}.{{item.text}}
</div>

事件方法

dragend(e,index){
console.log(index);
    // 避免源对象触发自身的dragenter事件
    if (this.dragIndex !== index) {
        console.log(this.exportcheckedKeyss);
        let start = this.exportcheckedKeyss[index]
        let now = this.exportcheckedKeyss[this.dragIndex]
        this.exportcheckedKeyss.splice(this.dragIndex,1,start)
        this.exportcheckedKeyss.splice(index,1,now)
        console.log(this.exportcheckedKeyss);
    }
    console.log("我结束了");
},
dragstart(index) {
    console.log(index);
},
dragenter(e, index) {
    e.preventDefault();
    this.dragIndex = index;
},
dragover(e, index) {
    console.log(index);
    e.preventDefault();
},