vue 动态组件名_Vue的动态拖放组件Vue.Draggable，实现页面元素动态拖放

介绍

在我们日常开发中可能会面临很多交互上的问题，特别是在Web应用盛行的今天，在之前有段时间的文章中介绍过javascript的拖拽库sortablejs，Vue.Draggable就是基于Sortable.js的允许拖放和视图模型数组同步的组件，避免了我们常说的重复造轮子，有了它省了我们很多事情。它基于Sortable.js并提供Sortable.js的所有功能！

---

---

开源地址

Github：

https://github.com/SortableJS/Vue.Draggable

演示地址：

https://sortablejs.github.io/Vue.Draggable/#/two-lists

功能特性

1、完全支持Sortable.js功能：

• 支持触摸设备
• 支持拖动手柄和可选文本
• 智能自动滚动支持
• 不同列表之间的拖放
• 没有jQuery依赖

2、保持同步HTML和视图模型列表

3、与Vue.js 2.0 transition-group兼容

4、支持取消

5、在需要完全控制时报告任何更改的事件

6、重用现有的UI库组件(例如vuetify，element或vue材料等)并使用tag和componentData道具使它们可拖动

安装和使用

• npm or yarn

yarn add vuedraggablenpm i -S vuedraggable

---

• 浏览器

---

• 典型用法

{{element.name}}

---

• .Vue文件

import draggable from 'vuedraggable' ... export default { components: { draggable, }, ...

---

• transition-group

{{element.name}}

---

可拖动组件应直接包装可拖动元素，或包含可拖动元素的过渡组件。

---

• 带有页脚槽()

{{element.name}}

Add

---

• 标题槽

{{element.name}}

Add

---

• Vuex

computed: { myList: { get() { return this.$store.state.myList }, set(value) { this.$store.commit('updateList', value) } }}

---

具体如何使用参照官网说明

示例

• 简单用法

---

---

• 两个列表

---

---

• 复制

---

---

• 按Ctrl键从列表1克隆元素

---

---

• 使用手柄图标拖动

---

---

• 过渡

---

---

• 表格行

---

---

• 表格列

---

---

• 嵌套拖拽

---

---

以上仅仅是挑选了一些示例，更多示例可直接到演示地址体验！

总结

Vue.Draggable是基于Sortable的拖放组件，可以很好的满足我们的某些交互场景，比如单据打印模板拖放、拖拽表格配合浏览器缓存实现用户的习惯记忆功能等，这些都可以配合一起实现，更多有关Sortable也可以点击下面的链接简单了解！

https://www.toutiao.com/i6690205016852005389/