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

具体说明,请参考:https://www.npmjs.com/package/vuedraggable

npm官方演示:

vuedraggable特性:

  1. 支持触摸设备
  2. 支持拖拽和选择文本
  3. 支持智能滚动
  4. 支持不同列表之间的拖拽
  5. 不以jQuery为基础
  6. 和视图模型同步刷新
  7. 和vue2的国度动画兼容
  8. 支持撤销操作
  9. 当需要完全控制时,可以抛出所有变化
  10. 可以和现有的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>

 

Logo

前往低代码交流专区

更多推荐