Vue组件Draggable实现拖拽功能

2019-11-19 12:26:18

字体：大中小

来源：转载

供稿：网友

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>

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

上一篇：vuedraggable+element ui实现页面控件拖拽排序效果

下一篇：BootStrap modal实现拖拽功能