situation & Task: 用vue在一个报表页面需要实现拖拽.
将tag从一个容器拖到另一个容器还是tag
并且, 它们在各自的组件中,是在父页面做交互
Action:
- 安装引用vuedraggable
- 在项目运行npm install -S vuedraggable,安装完成后在package.json可以看到已经安装依赖
-
在实际需要实现拖拽功能的页面引入draggable组件
实际使用的vue页面
2.将你想要拖拽的东西用draggable标签包裹,就可以实现拖拽效果了!
![](https://img.haomeiwen.com/i1803268/6c31449343b65e2e.png)
P.S.
- 如果拖拽前后没在同一个容器中,只需将两个draggable组件的group属性设置为一样的字段就可以.
- 在updated的生命周期中可以拿到拖拽后的值,watch也可以.
网友评论