美文网首页程序员
VueDraggable学习笔记

VueDraggable学习笔记

作者: 妮儿_smile | 来源:发表于2020-10-12 13:34 被阅读0次

situation & Task: 用vue在一个报表页面需要实现拖拽.

将tag从一个容器拖到另一个容器还是tag

并且, 它们在各自的组件中,是在父页面做交互

Action:

  1. 安装引用vuedraggable
  • 在项目运行npm install -S vuedraggable,安装完成后在package.json可以看到已经安装依赖
  • 在实际需要实现拖拽功能的页面引入draggable组件


    实际使用的vue页面

2.将你想要拖拽的东西用draggable标签包裹,就可以实现拖拽效果了!


image.png

P.S.

  1. 如果拖拽前后没在同一个容器中,只需将两个draggable组件的group属性设置为一样的字段就可以.
  2. 在updated的生命周期中可以拿到拖拽后的值,watch也可以.

相关文章

网友评论

    本文标题:VueDraggable学习笔记

    本文链接:https://www.haomeiwen.com/subject/xovepktx.html