vue 实现自由拖拽功能组件 vuedraggable 使用
vue 实现自由拖拽功能 vuedraggable组件
·
1.安装
npm 或 yarn
yarn add vuedraggable
npm i -S vuedraggable
2.引用
js
import draggable from 'vuedraggable'
...
export default {
components: {
draggable,
},
...
3.使用
<draggable v-model="myArray">
<transition-group>
<div v-for="element in myArray" :key="element.id">
{{element.name}}
</div>
</transition-group>
</draggable>
4.结果
列表可以拖动
5. 属性
除了这种最简单的用法,还有其他高级实现可用,具体属性见官网
详见官网:github:https://github.com/SortableJS/Vue.Draggable
掘金网友总结: https://juejin.cn/post/6844904150350692366
官网示例:https://sortablejs.github.io/Vue.Draggable/#/simple
更多推荐

所有评论(0)