1. draggable 属性是 HTML5 新增的，规定元素是否可拖动。
<div draggable>拖拽当前元素</div>
拖拽的周期及相关事件
1. 拖拽开始
-
ondragstart: 拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
2. 拖拽进行中
-
ondrag: 在dangstart 和 dargend 之间发生的， 此事件作用在被拖曳元素上
-
ondragenter: 拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
-
ondragover: 拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
3. 拖拽结束
-
ondragleave: 被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
-
ondragend: 当拖拽完成后触发的事件，此事件作用在被拖曳元素上 (若要调用 需要在ondragover上加e.preventDfault )
2. Vue实现列表拖拽效果
<template>
<div class="box">
<div
@dragstart="handleDragStart(item, index)"
@dragover.prevent="handleDragOver(index)"
@dragend="handleDragEnd()"
draggable
v-for="(item, index) in list"
:key="index"
class="item"
>
{{ item }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: ['1', '2', '3', '4'],
oldIndex: '',
oldData: '',
newIndex: ''
}
},
methods: {
handleDragStart(val, i) {
this.oldIndex = i
this.oldData = val
},
handleDragOver(i) {
this.newIndex = i
},
handleDragEnd() {
let newItems = [...this.list]
// 删除老的节点
newItems.splice(this.oldIndex, 1)
// 在列表中目标位置增加新的节点
newItems.splice(this.newIndex, 0, this.oldData)
this.list = [...newItems]
this.newIndex = ''
}
}
}
</script>
<style scoped>
.box {
display: flex;
align-items: center;
}
.item {
position: relative;
cursor: move;
width: 100px;
background: pink;
color: #fff;
margin: 10px;
height: 40px;
line-height: 40px;
text-align: center;
}
</style>
