vue使用vuedraggable插件拖拽排序

Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。所以一般要实现拖拽功能的时候我都会想到使用这个插件。

安装

    npm install vuedraggable

引入

    // 单个文件引入
    import draggable from "vuedraggable";
    
    // 注册组件
    components: {
      draggable
    },

基础用法

<draggable v-model="myArray" group="people" animation="1000" @start="onStart" @end="onEnd"> 
    <transition-group> 
        <div class="item" v-for="element in myArray" :key="element.id">{{element.name}}</div> 
    </transition-group> 
</draggable>



data() {
    return {
        // 在data中定义需要拖拽的数据
        myArray: [
            { people: 'cn', id: 1, name: '张三' },
            { people: 'cn', id: 2, name: '李四' },
            { people: 'cn', id: 3, name: '王五' },
            { people: 'cn', id: 4, name: '钟馗' }
        ]
    };
},
methods: {
    // 开始拖拽事件
    onStart() {
        // to do
    },
    // 拖拽结束事件
    onEnd() {
        // to do
    }
}

效果如下，就实现了一个简单的拖拽排序功能。

场景

需求： 拖拽按钮排序实现一个类似计算器的功能，如下图（从左边固定字段拖拽至右边形成计算公式）

实现

一、首先实现左边这块内容

  <div class="leftDrop">
    <div class="calculator" style="margin-top: 20px;">
      <draggable v-model="btns" :options="{group:{name: 'itxst',pull:'clone',put: false},sort: false}" animation="300">
        <transition-group>
          <div class="btns" v-for="(item,idx) in btns" :key="idx">{{item.paramDesc}}</div>
        </transition-group>
      </draggable>
    </div>
    <div class="baseBox">
      <p class="baseTitle">选择参数类型</p>
      <div class="outBox">
        <draggable v-model="arr1" :options="{group:{name: 'itxst',pull:'clone',put: false},sort: false}" animation="300">
           <transition-group>
               <div v-for="(item,idx) in arr1" :key="idx">{{item.paramName}}</div>
           </transition-group>
        </draggable>
      </div>
    </div>
  </div>
  
 data() {
    return {
       arr1: [
        {
          paramName: "基础值",
          paramDesc: "",
          paramValue: null,
          paramType: "baseDict"
        },
        {
          paramName: "收入指标",
          paramDesc: "",
          paramValue: null,
          paramType: "incomeQuota"
        },
        {
          paramName: "输入数值",
          paramDesc: "",
          paramValue: null,
          paramType: "define"
        },
      ],
      btns: [
        { paramName: '+', paramDesc: '+', paramType: "operator", paramValue: null },
        { paramName: '-', paramDesc: '-', paramType: "operator", paramValue: null  },
        { paramName: '*', paramDesc: '*', paramType: "operator", paramValue: null  },
        { paramName: '/', paramDesc: '/', paramType: "operator", paramValue: null  },
        { paramName: '(', paramDesc: '(', paramType: "operator", paramValue: null  },
        { paramName: ')', paramDesc: ')', paramType: "operator", paramValue: null  }
      ], 
    };
 },

vue.draggable提供了一个options属性用来配置当前可拖拽区域的操作。

:options="{group:{name: 'itxst',pull:'clone',put: false},sort: false}"

group

• name:‘itxst’,//组名为itxst name值一样多组之间相互拖拽，可以实现不同数组之间相互拖拽
• pull: true|false| ‘clone’|array|function,//是否允许拖出当前组
• put:true|false|array|function,//是否允许拖入当前组

sort

• false代表不能拖拽，默认为true

因为左边是不能拖动出区域并且自身不能排序的，只是克隆一份到右边，所以使用上诉配置项

二、右边拖入区域内容

  <div class="rightDrop">
    <div class="calculatorDropOut">
      <div>配置公式</div>
      <draggable v-model="rules" :options="options" animation="300">
        <transition-group>
            <div v-for="(item,idx) in rules" :key="idx">
              <el-select
                clearable
                placeholder="请选择基础值"
                size="small"
                filterable
                v-model="item.paramDesc"
                v-if="item.paramType == 'baseDict'"
              >
                <el-option
                  :key="idx"
                  :label="option.paramDesc"
                  :value="option.paramDesc"
                  v-for="(option,idx) in ObjectArr.baseArr"
                ></el-option>
              </el-select>
               <el-select
                clearable
                placeholder="请选择收入指标"
                size="small"
                filterable
                v-model="item.paramDesc"
                v-if="item.paramType == 'incomeQuota'"
              >
                <el-option
                  :key="idx"
                  :label="option.incomeQuota"
                  :value="option.incomeQuota"
                  v-for="(option,idx) in ObjectArr.incomeQuotaconditions"
                ></el-option>
              </el-select>
              <span v-if="item.paramType == 'operator'">{{item.paramDesc}}</span>
              <el-input size="small" v-if="item.paramType == 'define'" @blur="val => Number(item.paramValue)" v-model="item.paramValue" type="number" maxlength="50" placeholder="请输入"></el-input>
            </div>
        </transition-group>
      </draggable>
    </div>
    <div class="bottomBtn">
      <el-button plain @click="deleteLabel">删除</el-button>
      <el-button plain @click="empty">清空</el-button>
    </div>
  </div>
  
 data() {
    return {
       rules: [],
       ObjectArr: {
          baseArr: [],
          incomeQuotaconditions: []
       },
       // 这里的options定义在data里是因为为了动态配置options的属性
       options: {group:{name: 'itxst',pull: 'clone', put: true},sort: true},
    };
 },

以上代码就实现了个拖拽形成计算公式

补充

源码地址下载https://download.csdn.net/download/aiyang1214878408/85593958