vue----实现不同面板之间的拖拽按钮功能

样式说明

将 AND 按钮拖拽到右边

将“添加文本框”按钮拖拽到右边面板，拖拽完成之后，形成一个文本框

               
                    <el-form-item
                      v-for="item in opMap"
                      :key="`opItem_${(item && item.label) || 'label'}`"
                      :label="item && item.label"
                    >
                      <el-button
                        draggable="true"
                        v-for="item in item.value"
                        :key="`opMapItem_${item.label}_${item.value}`"
                        @dragstart.native="dragStart(item, true)"
                        @dragend.native="dragEnd"
                        type="primary"
                        :disabled="item.disable"
                        plain
                        @click="handleClickOpMap(item.value, item.label)"
                        >{{ item.label }}</el-button
                      >
                    </el-form-item>
						// 拖拽后可放入的标签
						<div
                    class="line"
                    v-for="(item, index) in formData.configInfo"
                    :key="`configInfoItem_${item.type}_${index}`"
                    draggable="true" // 设置可拖拽的属性
                    @dragstart="e => dragStart({index}, false, e)"
                    @dragenter="dragEnter(index)"
                    @dragend="dragEnd"
                    @click="rowPos = index"
                  ></div>
								
......
              dragStart(data, flag, e) {
                    this.dropData = {...data, flag} || null;
                },
                // 进入到被拖拽区域，记录拖动到的位置
              dragEnter(index) {
                 this.dropIndex = index;
                 this.rowPos = index;
                 this.leftLine = this.rightLine = false;
                 if (this.dropData.flag) {
                     this.curRowDirection === 'down' ? (this.rightLine = true) : (this.leftLine = true);
                    } else {
                     this.dropData.index !== this.dropIndex ? this.dropData.index > this.dropIndex
                     ?(this.leftLine = true) : (this.rightLine = true) : (this.leftLine = this.rightLine = false);
      }
    }, 
    // 放下拖拽物，处理拖拽结果
             drop() {
                 if (this.dropData.flag) {
                   this.rowPos = this.formData.configInfo.length === 0 || this.dropIndex === 0
            ? 0 : this.dropIndex || this.formData.configInfo.length - 1;
                this.dropData && this.handleClickOpMap(this.dropData.value, this.dropData.label);
               } else {
                  if (this.dropData.index !== this.dropIndex) {
                 const dropData = this.formData.configInfo.splice(this.dropData.index, 1);
                 this.formData.configInfo.splice(this.dropIndex, 0, dropData[0]);
                 this.rowPos = this.dropIndex;
              }
             }
            }

代码说明：

1. 将一些按钮数据放在一个数组里面，利用v-for，填充到表单项里面，并将字段放在button中。
2. 为button组件设置dragstart，dragend，拖拽开始和拖拽结束两个方法。
3. 拖拽开始方法，是将拖拽按钮的数据，保存在变量里面。
4. 拖拽结束方法，是记录拖拽元素的位置
5. drop() 方法，是在拖拽结束的时候，处理拖拽的结果。