vue drag and drop

1.設置 div 元素允許拖拽

draggable="true"

2.設置元素拖拽開始事件

@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.在拖放區 drop 事件中獲取數據

 

<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)
}

注意

必須給拖放區元素添加 dragover.prevent，才能使 drop 事件正確執行

一個基於 quill 的拖拽 Demo:

https://github.com/gywgithub/vue-quill-drag-drop

作者：情義w
鏈接：https://www.jianshu.com/p/4d997bd855d3
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。