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)文章
這篇文章主要介紹了基于vue實現(xiàn)的圓形菜單欄組件，本文通過實例代碼，圖文詳解的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了如何在前端處理表格數(shù)據(jù)并展示在Element?UI的el-table組件中,核心思想是先構(gòu)建表頭和第一列,然后根據(jù)表頭和第一行的數(shù)據(jù)填充表格內(nèi)容2025-12-12
這篇文章主要介紹了vue element和nuxt的使用技巧分享，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
我們在使用element-ui的時候經(jīng)常會遇到需要修改組件默認樣式,下面這篇文章主要給大家介紹了關(guān)于element-ui中樣式覆蓋問題的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
本文要給大家介紹Vue實現(xiàn)動態(tài)樣式的多種方法，下面給大家?guī)韼讉€案列，需要的朋友可以借鑒研究一下。2021-06-06
這篇文章主要介紹了vue中的mescroll搜索運用及各種填坑處理，文中通過代碼給大家講解了mescroll vue使用，感興趣的朋友跟隨小編一起看看吧2019-10-10
使用Vue父子組件通信實現(xiàn)todolist的功能示例代碼
這篇文章主要給大家介紹了關(guān)于如何使用Vue父子組件通信實現(xiàn)todolist的功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-04-04
使用echarts柱狀圖實現(xiàn)select下拉刷新數(shù)據(jù)
這篇文章主要介紹了使用echarts柱狀圖實現(xiàn)select下拉刷新數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解vue-cli 3.0 build包太大導(dǎo)致首屏過長的解決方案
這篇文章主要介紹了詳解vue-cli 3.0 build包太大導(dǎo)致首屏過長的解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)Input輸入框模糊查詢方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10