Vue利用HTML5拖放（Drag and Drop）功能实现数据（或资源）传递

基础属性

draggable：true，表示元素可以被拖动; false，表示元素不可以被拖动

拖拽事件

Event	On Event Handler	Fires when…
drag	ondrag	当拖动元素或选中的文本时触发
dragend	ondragend	当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键)
dragenter	ondragenter	当拖动元素或选中的文本到一个可释放目标时触发
dragexit	ondragexit	当元素变得不再是拖动操作的选中目标时触发
dragleave	ondragleave	当拖动元素或选中的文本离开一个可释放目标时触发
dragover	ondragover	当元素或选中的文本被拖到一个可释放目标上时触发（每100毫秒触发一次）
dragstart	ondragstart	当用户开始拖动一个元素或选中的文本时触发
drop	ondrop	当元素或选中的文本在可释放目标上被释放时触发

具体实现

1、设置 div 元素属性 draggable="true" 实现可拖拽

<div draggable="true"></div>

2、通过 div 元素拖拽开始 dragstart 事件，将数据存储（通过 dataTransfer.setData(format, data) 实现）

<template>
	<div v-for="(item, index) in list" :key="index" draggable="true" @dragstart="dragstart($event, item)" @dragend="dragend">
    	{{item.name}}
	</div>
</template>

<script>
export default {
    methods: {
        dragstart (event, data) {
  			let resData = JSON.stringify(data)
			event.dataTransfer.setData('text', resData)
		},
        dragend (event) {
          event.dataTransfer.clearData()
        }
    }
}
</script>

注意： 因为传递的数据 data 是个对象（Object），而 dataTransfer.setData(format, data) 中的第二个参数 data 接受的是个字符串（String），所以需要将其进行转换；而它的第一个参数 format 是设置传递数据的格式，设置成 text 格式，是为了兼容IE10及以上版本，否则在IE中会报错；接受数据同理

3、通过 div 元素在释放区的 drop 事件，获取存储的数据（通过 dataTransfer.getData(format) 实现）

<template>
    <div @drop="dropEle" @dragover.prevent></div>
</template>

<script>
export default {
    dropEle (event) {
      let data = event.dataTransfer.getData('text')
      let resData = JSON.parse(data)
      console.log(resData)
    }
}
</script>

注意： 必须给拖放区元素添加 dragover.prevent，才能使 drop 事件正确执行