vuedraggable示例_VUE开发--拖拽组件vuedraggable(七十六)

一、vuedraggable简介

Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。

特性

支持触摸设备

支持拖拽和选择文本

支持智能滚动

支持不同列表之间的拖拽

不以jQuery为基础

和视图模型同步刷新

和vue2的国度动画兼容

支持撤销操作

当需要完全控制时，可以抛出所有变化

可以和现有的UI组件兼容

二、组件安装

npm i vuedraggable -S

三、引入

import draggable from 'vuedraggable'

四、示例

{ {item}}

// 导入组件

import vuedraggable from "vuedraggable";

export default {

name: "HelloWorld",

components: { vuedraggable },

props: {},

data() {

return {

// 定义列表

list: [1, 2, 34, 4, 54, 5]

};

},

// 更新事件

updated() {

console.log(this.list);

},

methods: {}

};

.wrapper {