HTML5 原生拖放
拖放流程
选中 → 拖动 → 释放
-
选中
html 中图片，链接，文本默认可以拖动， 其他元素不能拖动
为了使这些元素可以被拖动， 需要将元素的 draggable 设置为 truedraggable属性的值： true， false， auto
-
拖动
拖动可分为： 拖动开始、拖动中、拖动结束，针对这3个过程事件事件对象 事件名称 事件说明 被拖动的元素 dragstart 拖动开始时触发 被拖动的元素 drag 拖动过程中每隔一定时间触发一次 被拖动的元素 dragend 拖动结束时触发 目的地元素 dragenter 进入目标元素时触发 目的地元素 dragover 在目标元素中时触发 目的地元素 dragleave 离开目标元素时触发 -
释放
释放元素事件事件对象 事件名称 事件说明 目的地元素 drop 拖动完成时触发
事件说明
拖放事件触发的派发对象 DragEvent 与鼠标派发对象 MouseEvent 相同，还增加了 dataTransfer 属性。该属性用于保存拖放的数据和交互信息，返回DataTransfer对象。
- dragstart
可被拖放元素开始被拖动时触发， 可在此时缓存一些被拖放元素的信息
- drag
可被拖放元素在拖动过程中定时触发
- dragend
可被拖放元素拖动结束时触发， 该事件实际结束时间比鼠标松开时间晚， 比 dragleave 事件触发时间晚
- dragenter
拖动其他元素进入该元素时触发， 该事件触发时间为鼠标指针进入元素时
- dragover
拖动其他元素在该元素中移动时触发
- draglevel
拖动其他元素离开该元素时触发， 该事件触发时间为鼠标指针离开元素时。
鼠标没有离开，拖动结束也会触发该事件，且在 dragend 事件之前执行
- drop
拖放动作完成时触发的事件， 该事件存在于 draglevel 事件之前， 可以作为鼠标松开瞬间的判断
==注： dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素，所以需要完成拖放功能，要在这两个事件中添加阻止默认行为 e.preventDefault()。否则不会触发 drop 事件==
实例
- vue实例
<template>
<ul>
<li v-for="(li, index) in lis" :class="{active: activeIndex == index, hover: hoverIndex == index}" draggable="true" @mousedown="mouseDown(index)" @dragstart="dragstart(li, index)" @dragenter.prevent="drapEnter(index)" @dragover.prevent @dragleave.prevent="dragLeave(index)" @drop.prevent="drop(li, index)">
{{li.label}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'model',
data() {
return {
lis: [
{label: 'LI001'},
{label: 'LI002'},
{label: 'LI003'},
{label: 'LI004'},
{label: 'LI005'},
{label: 'LI006'},
{label: 'LI007'},
{label: 'LI008'},
],
dragEnterItem: null,
dragEnterIndex: undefined,
dragItem: null,
dragIndex: undefined,
activeIndex: undefined,
hoverIndex: undefined,
}
},
created() {},
methods: {
mouseDown(index) {
this.activeIndex = index
},
dragstart(item, index) {
this.dragItem = item
this.dragIndex = index
},
drop(item, index) {
if (this.dragItem && this.dragIndex >= 0 && this.dragIndex !== index) {
if(!item.children){
item.children = []
}
item.children.push(this.dragItem)
this.lis.splice(this.dragIndex, 1)
this.hoverIndex = null
this.activeIndex = index
}
},
drapEnter(index) {
this.hoverIndex = index
},
dragLeave(index) {
this.hoverIndex = null
}
}
}
</script>
<style lang='scss' scoped>
ul {
overflow: hidden;
li {
margin-right: 20px;
margin-bottom: 30px;
width: 200px;
height: 200px;
float: left;
border: 1px solid #ccc;
&:hover {
background: rgba(#409EFF, .2);
}
&.hover {
background: rgba(#409EFF, .2);
}
&.active {
border: 1px solid #409EFF;
background: rgba(#409EFF, .2);
}
}
}
</style>
