您的位置：首页 > Web前端 > Vue.js

Vue组件Draggable实现拖拽功能

2018-12-03 09:26 1161 查看

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航