Vue组件Draggable实现拖拽功能
Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。
具体说明，请参考：学习链接
npm官方演示：
vuedraggable特性：
支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操作 当需要完全控制时，可以抛出所有变化 可以和现有的UI组件兼容使用
安装：
npm install vuedraggable
页面引入：
import draggable from 'vuedraggable'
data定义数据进行模拟：这是排序的案例，跟上面图不一样
<template>
<div>
<!-- 调用组件 -->
<draggable element="ul" v-model="listdata">
<li v-for="item in listdata">{{item.name}}</li>
</draggable>
<!-- 展示list数据效果 -->
{{listdata}}
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
name: 'draggabletest',
components: {
draggable,
},
data () {
return {
listdata:[
{
id: 1,
name: '叶落森1'
},
{
id: 2,
name: '叶落森2'
},
{
id: 3,
name: '叶落森3'
},
{
id: 4,
name: '叶落森4'
},
{
id: 5,
name: '叶落森5'
}
]
}
},
}
</script>
相关文章
Isabella
2020-01-31
Claire
2021-05-21
Judy
2023-07-20
Rabia
2023-07-20
Brigitte
2023-07-20
Abbie
2023-07-20
Yvonne
2023-07-20
Rasine
2023-07-20
Tina
2023-07-20
Kande
2023-07-20
Flower
2023-07-20
Heather
2023-07-20
Tertia
2023-07-20
Fredrica
2023-07-20
Katherine
2023-07-20
Genet
2023-07-20
Orianna
2023-07-20
Ora
2023-07-20