拖拽vue.draggable

前言

最近在开发中，产品给到一个需求是，给表格自定义显示表头，并且支持拖拽。调研后选择vue.draggable这个插件，特此记录一下使用过程。Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作。

vue.draggable中文文档地址

官方git网站

使用方式

npm i -S vuedraggable

import draggable from 'vuedraggable'

属性说明：

建议使用sortable.js文档，有很详细的例子

group属性：

group属性，可以实现不同数组之间相互拖拽。比如group都为itxst的组之间可以相互拖动，本文例子中A列和B列可以相互拖动，但是无法拖到C列。 例子：debug.itxst.com/js/3uzn7nav

项目代码：

   <el-checkbox-group v-model="checkboxVal">
      <draggable v-model="baseArr" :group="groupA" animation="500" @start="onStart" @end="onEnd">
        <transition-group>
          <el-checkbox v-for="item in baseArr" :key="item.fieldName" :label="item.fieldName">
            {{ item.fieldName }}
          </el-checkbox>
        </transition-group>
      </draggable>
      <!-- 以下，不可以拖入，也不可以拖出去 -->
      <draggable
        v-model="nodeCodeArr"
        :disabled="true"
        :group="groupB"
        animation="500"
        @start="onStart"
        @end="onEnd"
      >
        <transition-group :style="style">
          <el-checkbox v-for="item in nodeCodeArr" :key="item.fieldName" :label="item.fieldName">
            {{ item.fieldName }}
          </el-checkbox>
        </transition-group>
      </draggable>
    </el-checkbox-group>
  </el-popover>