菜鸟教程:html5新增的鼠标事件中有对元素拖拽属性进行定义
参考上述博主的事件描述:
ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上
ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上
ondragover 事件:拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上
ondrop 事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上
ondragend 事件:当拖拽完成后触发的事件,此事件作用在被拖曳元素上
(图源:见第一个水印)
拖拽事件写法:
<ul>
<li
v-for= "item in dataList"
:key= "item.id"
draggable= 'true'
@dragstart="handleDragStart($event, item)"
@dragover.prevent="handleDragOver($event, item)"
@dragenter="handleDragEnter($event, item)"
@dragend="handleDragEnd($event, item)"
style="cursor: pointer"
>
{{item.name}}
</li>
</ul>
<script>
export default{
data(){
return{
dataList:[],
startElement:null, //开始拖拽元素
endElement:null, //结束拖拽元素
}
},
methods:{
handleDragStart(e,item) { //这个函数作用于开始拖拽的元素,能拿到被拖拽的元素
this.startElement = item;
},
handleDragEnter(e,item) { //这个函数作用于结束拖拽的元素,能拿到拖拽的目标元素
this.endElement = item;
}
}
}
</script>
注意点:
1、除了<img>、<a>标签外,其他可以拖拽的标签需要开启:draggable=“true”这个属性;
2、在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发(本例中使用简写形式,在标签中使用.prevent标识)。
3、可以利用ondragstart绑定的函数拿到被拖拽的元素;利用ondragenter绑定的函数拿到拖拽的目标元素。