vue使用event.dataTransfer实现A容器数据拖拽复制到到B容器

扶苏10022026-02-06 17:06

A容器代码

template

bash 复制代码

 <div class="field-list">
   <div
     v-for="col in columns"
     :key="col.columnName"
     class="field-item"
     draggable="true"
     @dragstart="onDragStart($event, col, 'field')"
   >
     <i class="el-icon-document"></i>
     <span class="field-name">{{ col.columnName }}</span>
     <span class="field-comment">{{ col.columnComment }}</span>
   </div>
 </div>

方法

bash 复制代码

function onDragStart(event, item, type) {
  event.dataTransfer.setData("type", type);
  event.dataTransfer.setData("data", JSON.stringify(item));
}

B容器代码

bash 复制代码

 <div class="condition-drop" @dragover.prevent @drop="onDropCondition">
   <div
     v-for="(cond, idx) in form.whereConfig.conditions"
     :key="idx"
     class="condition-row"
   >
     <el-tag>{{ cond.field }}</el-tag>
   </div>
 </div>

方法

bash 复制代码

function onDropCondition(event) {
  const type = event.dataTransfer.getData("type");
  if (type !== "field") return;

  const data = JSON.parse(event.dataTransfer.getData("data"));
  const exists = form.whereConfig.conditions.find((c) => c.field === data.columnName);
  if (!exists) {
    form.whereConfig.conditions.push({
      field: data.columnName,
    });
  }
}