亲宝软件园·资讯

展开

Vue组件Draggable实现拖拽功能

叶落森 人气:0

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>
  <https://img.qb5200.com/download-x/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>

加载全部内容

相关教程
猜你喜欢
用户评论