vue使用event.dataTransfer實現(xiàn)A容器數(shù)據(jù)拖拽復(fù)制到B容器方式
更新時間：2026年02月10日 14:16:05 作者：扶蘇1002
這篇文章主要介紹了vue使用event.dataTransfer實現(xiàn)A容器數(shù)據(jù)拖拽復(fù)制到B容器方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
A容器代碼
- template
<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>
- 方法
function onDragStart(event, item, type) {
event.dataTransfer.setData("type", type);
event.dataTransfer.setData("data", JSON.stringify(item));
}
B容器代碼
<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>
- 方法
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,
});
}
}
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
elementui中使用el-tabs切換實時更新數(shù)據(jù)
這篇文章主要介紹了elementui中使用el-tabs切換實時更新數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要給大家介紹了關(guān)于vue中插槽slot的理解和使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
關(guān)于Vue中echarts響應(yīng)式頁面變化resize()的用法介紹
Vue項目中開發(fā)數(shù)據(jù)大屏，使用echarts圖表根據(jù)不同尺寸的屏幕進行適配，resize()可以調(diào)用echarts中內(nèi)置的resize函數(shù)進行自適應(yīng)縮放，本文將給大家詳細(xì)介紹resize()的用法,需要的朋友可以參考下2023-06-06
Vue.js的組件可以理解為預(yù)先定義好了行為的ViewModel類。這篇文章主要介紹了Vue.js組件使用開發(fā)實例教程的相關(guān)資料,需要的朋友可以參考下2016-11-11
本篇文章主要介紹了Vue2.0實現(xiàn)1.0的搜索過濾器功能實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
vue.js給動態(tài)綁定的radio列表做批量編輯的方法
下面小編就為大家分享一篇vue.js給動態(tài)綁定的radio列表做批量編輯的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細(xì)介紹了Vue2項目如何使用pdfjs-dist解析pdf相關(guān),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-05-05
防抖和節(jié)流大家都用過,但 Vue性能優(yōu)化其實不止這兩種,所以這篇文章小編為大家整理了五大用的 vue 性能優(yōu)化寫法,希望對大家有一定的幫助2026-03-03
vuejs+element-ui+laravel5.4上傳文件的示例代碼
本篇文章主要介紹了vuejs+element-ui+laravel5.4上傳文件的示例代碼，具有一定的參考價值，有興趣的可以了解一下2017-08-08
放大鏡效果在很多購物網(wǎng)站都可以看到，本文主要介紹了vue3實現(xiàn)淘寶放大鏡效果的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06