vue實(shí)現(xiàn)拖拽交換位置
更新時(shí)間：2022年04月07日 09:56:36 作者：包子源
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽交換位置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)拖拽交換位置的具體代碼，供大家參考，具體內(nèi)容如下
<template>
? <div class="root">
? ? <transition-group tag="div" class="container">
? ? ? <div
? ? ? ? class="item"
? ? ? ? :class="'item' + i"
? ? ? ? v-for="(item, i) in items"
? ? ? ? :key="item.key"
? ? ? ? :style="{ 'background-color': item.color, border: '1px solid' }"
? ? ? ? draggable="true"
? ? ? ? @dragstart="handleDragStart($event, item)"
? ? ? ? @dragover.prevent="handleDragOver($event, item)"
? ? ? ? @dragenter="handleDragEnter($event, item)"
? ? ? ? @dragend="handleDragEnd($event, item)"
? ? ? >
? ? ? ? <div>{{ item }}</div>
? ? ? </div>
? ? </transition-group>
? </div>
</template>
?
<script>
export default {
? name: "Toolbar",
? data() {
? ? return {
? ? ? items: [
? ? ? ? { key: 1, color: "#3883a0" },
? ? ? ? { key: 2, color: "#4883a0" },
? ? ? ? { key: 3, color: "#5883a0" },
? ? ? ? { key: 4, color: "#6883a0" },
? ? ? ? { key: 5, color: "#7883a0" },
? ? ? ? { key: 6, color: "#8883a0" },
? ? ? ? { key: 7, color: "#9883a0" },
? ? ? ],
? ? ? ending: null,
? ? ? dragging: null,
? ? };
? },
? methods: {
? ? handleDragStart(e, item) {
? ? ? this.dragging = item;
? ? },
? ? handleDragEnd(e, item) {
? ? ? if (this.ending.key === this.dragging.key) {
? ? ? ? return;
? ? ? }
? ? ? let newItems = [...this.items];
? ? ? const src = newItems.indexOf(this.dragging);
? ? ? const dst = newItems.indexOf(this.ending);
? ? ? newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]));
? ? ? console.log(newItems);
?
? ? ? this.items = newItems;
? ? ? this.$nextTick(() => {
? ? ? ? this.dragging = null;
? ? ? ? this.ending = null;
? ? ? });
? ? },
? ? handleDragOver(e) {
? ? ? // 首先把div變成可以放置的元素，即重寫(xiě)dragenter/dragover
? ? ? // 在dragenter中針對(duì)放置目標(biāo)來(lái)設(shè)置
? ? ? e.dataTransfer.dropEffect = "move";
? ? },
? ? handleDragEnter(e, item) {
? ? ? // 為需要移動(dòng)的元素設(shè)置dragstart事件
? ? ? e.dataTransfer.effectAllowed = "move";
? ? ? this.ending = item;
? ? },
? },
};
</script>
?
<style lang="less" scoped>
.container {
? display: flex;
? flex-wrap: wrap;
}
.item {
? width: 200px;
? height: 200px;
? margin: 10px;
? color: #fff;
? transition: all linear 0.3s;
}
.item0 {
? width: 400px;
}
</style>效果
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了在vue中封裝方法以及多處引用該方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue組件值變化但不刷新強(qiáng)制組件刷新的問(wèn)題
這篇文章主要介紹了vue組件值變化但不刷新強(qiáng)制組件刷新的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要為大家詳細(xì)介紹了vue封裝組件之上傳圖片組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了Vue父子模版?zhèn)髦导敖M件傳值的三種方法,需要的朋友可以參考下2017-11-11
本篇文章主要介紹了詳解vue+css3做交互特效的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
Vue實(shí)現(xiàn)路由懶加載的詳細(xì)步驟
路由懶加載是指在用戶實(shí)際訪問(wèn)某個(gè)特定路由時(shí),才加載該路由相關(guān)組件的機(jī)制,這種方式可以顯著減少初始加載時(shí)的 JavaScript 文件大小,從而提高應(yīng)用的加載速度,所以本文給大家介紹了Vue實(shí)現(xiàn)路由懶加載的詳細(xì)步驟,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了如何在前端項(xiàng)目中使用terser-webpack-plugin插件來(lái)刪除代碼中的console.log語(yǔ)句,以避免在正式環(huán)境中輸出調(diào)試信息,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
使用 webpack 插件自動(dòng)生成 vue 路由文件的方法
這篇文章主要介紹了使用 webpack 插件自動(dòng)生成 vue 路由文件的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
vue打包報(bào)錯(cuò):ERROR in static/js/xxx.js from U
這篇文章主要介紹了vue打包報(bào)錯(cuò):ERROR in static/js/xxx.js from UglifyJs undefined問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue點(diǎn)擊項(xiàng)目唯一id生成器nanoid的使用方式
這篇文章主要介紹了vue點(diǎn)擊項(xiàng)目唯一id生成器nanoid的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05