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

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » Vue Drag and Drop

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活