1.設(shè)置 div 元素允許拖拽
draggable="true"
2.設(shè)置元素拖拽開始事件
@dragstart="drag(item.data)"
<div style="border:1px solid green;" draggable="true" @dragstart="dragstart($event, item.data)" @dragend="dragend">
{{item.data}}
</div>
dragstart (event, data) {
console.log('drag')
event.dataTransfer.setData('item', data)
},
dragend (event) {
event.dataTransfer.clearData()
},
3.在拖放區(qū) drop 事件中獲取數(shù)據(jù)
<div style="border:1px solid red;height: 100px;width:300px;" @drop="drop" @dragover.prevent>
<p style="color:#ccc;">{{this.dropData}}</p>
</div>
drop (event) {
console.log('drop')
let data = event.dataTransfer.getData('item')
this.dropData = data
console.log('data: ', data)
}
注意
必須給拖放區(qū)元素添加 dragover.prevent卒蘸，才能使 drop 事件正確執(zhí)行
