Vue Drag and Drop

1. 设置 div 元素允许拖拽

   1	draggable="true"

2. 设置元素拖拽开始事件

   @dragstart=“drag(item.data)”

   1 2 3

   <div style="border:1px solid green;" draggable="true" @dragstart="dragstart($event, item.data)" @dragend="dragend"> {{item.data}} </div>

   1 2 3 4 5 6 7

   dragstart (event, data) { console.log('drag') event.dataTransfer.setData('item', data) }, dragend (event) { event.dataTransfer.clearData() },

3. 在拖放区 drop 事件中获取数据

   1 2 3

   <div style="border:1px solid red;height: 100px;width:300px;" @drop="drop" @dragover.prevent> <p style="color:#ccc;">{{this.dropData}}</p> </div>

   1 2 3 4 5 6

   drop (event) { console.log('drop') let data = event.dataTransfer.getData('item') this.dropData = data console.log('data: ', data) }

   注意

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