Vue组件Draggable实现拖拽功能
更新时间：2021年09月15日 11:29:56 作者：叶落森
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue 修改网站图标的方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
本文主要介绍了Vue出现弹出层时禁止底部页面跟随滑动，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了vue数组动态刷新失败问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家介绍了vue组件prop验证作用示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
vue3使用wangeditor封装和自定义上传文件官方教程
这篇文章主要为大家介绍了vue3使用wangeditor封装和自定义上传文件的官方教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2023-06-06
功能比较简单，在单一html中使用vue.js分页展示数据，并未安装脚手架，或使用相关UI框架，此时需要手写一个分页器，不失为最合理最便捷的解决方案,需要的朋友可以参考下2020-11-11
这篇文章主要介绍了浅谈vue3中effect与computed的亲密关系，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要为大家介绍了vue3数组或对象赋值不更新解决方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
今天小编就为大家分享一篇对vue中v-on绑定自定事件的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue3封装echarts图表数据无法渲染到页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-09-09
最新评论