Vue组件Draggable实现拖拽功能

来源：懂视网责编：小采时间：2020-11-27 22:03:20

Vue组件Draggable实现拖拽功能

Vue组件Draggable实现拖拽功能:Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。具体说明，请参考：学习链接 npm官方演示： vuedraggable特性：支持触摸设备支持拖拽和选择文本支持智能滚动支持不同列表之间的拖拽不以jQuery为基础和视图模型同步刷新和vue2

推荐度：

点击下载本文 文档为doc格式

导读Vue组件Draggable实现拖拽功能:Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。具体说明，请参考：学习链接 npm官方演示： vuedraggable特性：支持触摸设备支持拖拽和选择文本支持智能滚动支持不同列表之间的拖拽不以jQuery为基础和视图模型同步刷新和vue2

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组件Draggable实现拖拽功能

推荐度：

点击下载本文 文档为doc格式

标签： VUE 组件拖拽

热门焦点

Vue组件Draggable实现拖拽功能

Vue组件Draggable实现拖拽功能

Vue组件Draggable实现拖拽功能

最新推荐

猜你喜欢

热门推荐