vue3按钮拖拽

最新推荐文章于 2024-05-19 15:09:20 发布

熙翎

最新推荐文章于 2024-05-19 15:09:20 发布

阅读量384

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_42853570/article/details/129747934

版权

该代码示例展示了如何在Vue应用中使用拖放事件处理（dragstart,dragover,dragenter,dragend）来实现元素的排序。通过监听这些事件，更新items数组以反映拖放后的顺序变化，从而实现动态布局的交互功能。

摘要由CSDN通过智能技术生成

<template>
    <div class="root">
        <transition-group tag="div" class="container">
            <div
                v-for="(item, i) in base.items"
                :key="item.key"
                class="item"
                :class="'item' + i"
                :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 lang="ts" scoped>
import { defineComponent, reactive,watch } from "vue";
export default defineComponent({
    components: {},
    setup() {
        //基础信息
        const base = reactive({
            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 as any,
            dragging: null as any,
        });
        function handleDragStart(e, item) {
            base.dragging = item;
        }
        function handleDragEnd(e, item) {
            if (base.ending.key === base.dragging.key) {
                return;
            }
            let newItems = [...base.items];
            const src = newItems.indexOf(base.dragging);
            const dst = newItems.indexOf(base.ending);
            newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]));
            console.log(newItems);

            base.items = newItems;
            base.$nextTick(() => {
                base.dragging = null;
                base.ending = null;
            });
        }
        function handleDragOver(e) {
            // 首先把div变成可以放置的元素，即重写dragenter/dragover
            // 在dragenter中针对放置目标来设置
            e.dataTransfer.dropEffect = "move";
        }
        function handleDragEnter(e, item) {
            // 为需要移动的元素设置dragstart事件
            e.dataTransfer.effectAllowed = "move";
            base.ending = item;
        }
        return {
            base,//基础信息
            handleDragStart,
            handleDragEnd,
            handleDragOver,
            handleDragEnter,

        };
    },
});

</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>