样式说明
将 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;
}
}
}
代码说明:
- 将一些按钮数据放在一个数组里面,利用v-for,填充到表单项里面,并将字段放在button中。
- 为button组件设置dragstart,dragend,拖拽开始和拖拽结束两个方法。
- 拖拽开始方法,是将拖拽按钮的数据,保存在变量里面。
- 拖拽结束方法,是记录拖拽元素的位置
- drop() 方法,是在拖拽结束的时候,处理拖拽的结果。