Vue组件Draggable实现拖拽功能

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持菜鸟教程(cainiaojc.com)。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#cainiaojc.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。