vue 不同数组的拖拉拽

最新推荐文章于 2024-08-29 15:10:00 发布

靓靓的圆子

最新推荐文章于 2024-08-29 15:10:00 发布

阅读量316

点赞数

分类专栏： vuex js 拖拉拽文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_45646663/article/details/128117633

版权

js 同时被 3 个专栏收录

38 篇文章

订阅专栏

vuex

6 篇文章

订阅专栏

拖拉拽

1 篇文章

订阅专栏

该博客介绍了使用Vue.js实现一级和二级监护项的拖放排序功能。通过v-for指令遍历数据，结合dragstart、dragover、dragenter、dragend事件处理拖放操作，同时处理不同层级间的排序和转移。文章详细展示了Vue组件模板和相关方法，包括数据处理和样式设定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，从一级监护中拖拉拽改变顺序
2，从一级监护拖拉拽到二级监护中去

<template>
    <div class="root">
    <transition-group tag="div" class="container">
    <div
        class="item"
        v-for="(item, i) in items"
        :key="i">
        <span class="color:#333;">{{item.Name}}</span>
        <div
           :class="'item' + i"
            v-for="(ite, i) in item.item1"
            :key="ite.value" 
           :style="{ 'background-color': ite.color, border: '1px solid' }"
           draggable="true"
            @dragstart="handleDragStart($event, ite)"
            @dragover.prevent="handleDragOver($event, ite)"
            @dragenter="handleDragEnter($event, ite,item)"
            @dragend="handleDragEnd($event, ite,item)"
           >
           <div>{{ ite.Code }}</div>

        </div>

      </div>
    </transition-group>
  </div>
</template>

数据

items: [
                {
                    Code:'001',
                    Name:'一级监护',
                    item1:[
                        {
                            type:'001', //父级Code
                            Code:1,
                            text:'Clcr<',
                            value:10,
                            color: "#3883a0"
                        },
                        {
                            type:'001',
                            Code:2,
                            text:'ASR<',
                            value:20,
                            color: "#4883a0"
                        },
                        {
                            type:'001',
                            Code:3,
                            text:'ASR<',
                            value:20,
                            color: "#0BBD80"
                        }

                    ]
                },
                {
                    Code:'002',
                    Name:'er级监护',
                    item1:[
                        {
                            type:'002',
                            Code:4,
                           text:'ALT<',
                           value:30,
                           color: "#5883a0"
                        },
                        {
                            type:'002',
                            Code:5,
                           text:'ASR<',
                           value:40,
                           color: "#6883a0"
                        },
                        {
                            type:'002',
                            Code:6,
                           text:'ASR<',
                           value:40,
                           color: "#C986FC"
                        }


                    ]
                },
            ],
            ending: null,
            dragging: null,
            endingItem:{},//移到目的的数组

methods:{
	handleDragStart(e, item) {
    	this.dragging = item;
    },
    handleDragEnd(e, item,item2) {
        console.log(122,e,item,item2);
        console.log(133,this.dragging);
        console.log(134,this.ending);
        if (this.ending.Code === this.dragging.Code) {
            return;
        }
        let newItems = []
        if (this.ending.type === this.dragging.type){
            console.log(145)
            newItems = item2.item1;
            // let newItems = [...this.items];
            // let newItems = this.items;
            const src = newItems.indexOf(this.dragging);  //找下标
            const dst = newItems.indexOf(this.ending);   //找下标
            console.log(788,src);
            console.log(799,dst);
            newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]));
            console.log(800,newItems);

        }else{
            newItems = item2.item1;
            const src = newItems.indexOf(this.dragging);  //找下标

            // this.endingItem   //移到目的的数组
            newItems.splice(src, 1,)
            this.endingItem.item1.forEach(element => {
                this.dragging.type = element.type
            });
            this.endingItem.item1.push(this.dragging)


        }

    
        // this.items = newItems;
        this.$nextTick(() => {
            this.dragging = null;
            this.ending = null;
        });
        console.log(199933,this.items)
    },
    handleDragOver(e) {
        // 首先把div变成可以放置的元素，即重写dragenter/dragover
        // 在dragenter中针对放置目标来设置
        e.dataTransfer.dropEffect = "move";
    },
    handleDragEnter(e, item,item3) {
        // 为需要移动的元素设置dragstart事件
        e.dataTransfer.effectAllowed = "move";
        this.ending = item;
        console.log(999,this.ending,item3)
        this.endingItem = item3

    },
}

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 200px;
  /* height: 200px; */
  margin: 10px;
  color: #fff;
  transition: all linear 0.3s;
}
.item0 {
  width: 400px;
}
</style>