阅读 355

vue拖拽组件draggable解决a-table的移动

运用场景:table的拖动排序(表格拖拽),类似于低代码平台自定义表单的拖拽(多列拖拽)

介绍:

vuedraggable: 是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作,总之是一款非常优秀的vue拖拽组件。

安装:

yarn add vuedraggable
npm i -S vuedraggable
复制代码

使用:

// 引入
import draggable from "vuedraggable";

// 组件注册
export default {
  components: {
    draggable
  },
};

// 使用
<draggable></draggable>
复制代码

项目实践:

运用场景:table的拖动排序(表格拖拽),类似于低代码平台自定义表单的拖拽(多列拖拽)

介绍:

vuedraggable: 是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作,总之是一款非常优秀的vue拖拽组件。

安装:

yarn add vuedraggable
npm i -S vuedraggable
复制代码

使用:

// 引入
import draggable from "vuedraggable";

// 组件注册
export default {
  components: {
    draggable
  },
};

// 使用
<draggable></draggable>
复制代码

项目实践:

1.table的拖拽排列

image.png 先封装一个draggable的组件:

<template>
  <Draggable tag="tbody" :list="data.dataSource" animation="500" class="drag" @change="onChange">
    <slot></slot>
  </Draggable>
</template>
<script>
import Draggable from 'vuedraggable'

export default {
  name: 'CustomWrapper',
  components: {
    Draggable
  },
  inject: ['data'],
  data() {
    return {}
  },
  methods: {
    onChange(evt) {
      let data = this.data.dataSource
      const index = evt.moved.newIndex
      // 将你想要的值 传给父组件
      this.data.handleDrag({
        id: data[index].id,
        before: data[index - 1] ? data[index - 1].id : '',
        after: data[index + 1] ? data[index + 1].id : ''
      })
    }
  }
}
</script>

<style lang="less" scoped>
.drag {
  /deep/ tr {
    cursor: move;
  }
}
</style>
复制代码

再抛出一个函数,用于返回移动的前后的值

table页面

  <a-table :columns="columns" :data-source="dataSource" :components="components">
      <a slot="name" slot-scope="text">{{ text }}</a>
      <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
      <span slot="tags" slot-scope="tags">
        <a-tag v-for="tag in tags" :key="tag" :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
          {{ tag.toUpperCase() }}
        </a-tag>
      </span>
      <span slot="action" slot-scope="text, record">
        <a>Invite 一 {{ record.name }}</a>
        <a-divider type="vertical" />
        <a>Delete</a>
        <a-divider type="vertical" />
        <a class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
      </span>
    </a-table>
    
<!--引入组件-->
import CustomWrapper from './CustomWrapper'

data(){
<!--将组件定义一下-->
 this.components = {
  body: {
    wrapper: CustomWrapper
  }
}
return{}
}

method: {
 handleDrag(e) {
 // 接收到拖拽子组件传来的值,得到你需要的值 和后台进行接口操作
  console.log(e, 'e')
}
}
复制代码

便可完成table任意的移动

2.多列的拖拽

自定义表单的拖拽。此种属于多列拖拽

image.png

需要group属性

从左侧拖到中间则需要draggable的group name相同 且我的需求是从左侧复制拖拽到中间内容区,且中间内容区只可在本区域内拖动

既左侧需要:pull: clone

左侧:

    <draggable
      tag="ul"
      :list="list.fields"
      v-bind="{
        group: { name: 'form-draggable', pull: 'clone', put: false },
        sort: false,
        animation: 180
      }"
      :clone="clone"
    >
      <li v-for="(val, index) in list" :key="index" :class="layout" @click="$emit('handleListPush', val)">
        <i :class="`iconfont icon-${val.icon}`"></i>
        <span>{{ val.label }}</span>
      </li>
    </draggable>
复制代码
中间:
    <draggable
      :list="list"
      class="draggable-box"
      v-bind="{
        group: 'form-draggable',
        ghostClass: 'moving',
        animation: 180
      }"
      :emptyInsertThreshold="500"
      @add="deepClone"
    >
      <transition-group tag="div" name="list" class="list-main">
        <!--具体的字段展示组件-->
        <form-layout
          v-for="(item, index) in list"
          :key="item.column_name"
          :record="item"
          :index="index"
          v-bind="$attrs"
          :style="{ width: item.col_width ? (item.col_width / 12) * 100 + '%' : '100%', height: '100%' }"
          v-on="$listeners"
        ></form-layout>
      </transition-group>
    </draggable>
复制代码

这样即可实现拖拽

!!! 在这里有遇到一个坑:

当中间内容区域为空是,无法从左侧拖到中间区域,此时需要:emptyInsertThreshold="500" 即可实现拖拽 大家一定要注意哦~~~~

文章分类
前端
文章标签