vue实现图片拖动排序

2022-04-15 1,012

本文实例为大家分享了vue实现图片拖动排序的具体代码,供大家参考,具体内容如下

原理:现有一个图片的列表,拖动其中一个图片(触发dragstart),当拖动的图片移动到其他图片的位置(触发dragover),则将拖动的图片从原位置移动到该位置(触发dragend)。

dragstart:当用户开始拖动一个元素或者一个选择文本的时候 dragstart 事件就会触发。

dragover:当元素或者选择的文本被拖拽到一个有效的放置目标上时,触发 dragover 事件(每几百毫秒触发一次)。

dragend:拖放事件在拖放操作结束时触发。(我们这里可以不用)

(1)图片列表HTML结构。给需要拖动的元素添加属性draggable。这里要注意:模板for循环的key值需要唯一,因为vue在渲染的时候会采用就地复用的方式,如果key值唯一,重新排序后渲染的列表节点不会复用,这样可以避免一些问题。(我们在插入的时候会根据序号向数组中插入某个数据)

 <ul class="drag-container" 
            @dragstart="onDragStart"
            @dragover="onDragOver"
            @dragend="onDragEnd"
            ref="imgList">
            <li 
            v-for="(item,idx) in list" 
            :key='item.path'
            class="drag-list" 
            draggable="true" 
            >
                <img :src="item.path" alt="" />
            </li>
</ul>

(2)事件: dragstart、dragover绑定事件onDragStart、onDragOver

onDragStart:识别需要拖动的元素,保存到状态中,供拖动过程中dragover的绑定事件使用。 

onDragStart(event){
            console.log("start");
            this.draging = event.target;
        }, 

onDragOver:拖动过程中处于有效目标上的时候触发事件,识别的是目标元素,而不是拖动的元素。首先识别目标元素是否是我们需要的目标元素,我们例子判断是否是li元素,并判断图片是否与拖动的相同,则进行插入拖动元素的操作。
识别拖动元素与目标元素的位置序号,将拖动元素插入到目标元素前,再将拖动元素原位置的数据删除,在vue中,则只需要进行数据操作即可。

onDragOver(event){
            console.log('drag move')
            event.preventDefault();
            let target = event.target;
                //因为dragover会发生在ul上,所以要判断是不是li
            if (target.nodeName === "LI" && 
                target.childNodes[0].src !== this.draging.childNodes[0].src) {
                let idx_drag = this._index(this.draging)
                let idx_target = this._index(target)
                let _list = this.list
                let _drag = this.list[idx_drag]
                if(idx_drag>idx_target){
                    _list.splice(idx_target,0,_list[idx_drag]);
                    _list.splice(idx_drag+1,1)
                }else{
                    _list.splice(idx_target+1,0,_list[idx_drag]);
                    _list.splice(idx_drag,1)
                }
                console.log(_list[0].path)
                this.$emit("change", _list)
            }
        },

完整代码如下:

<template>
    <div class="image-list" v-if="list && list.length">
        <ul class="drag-container" 
        @dragstart="onDragStart"
        @dragover="onDragOver"
        @dragend="onDragEnd"
        ref="imgList">
            <li 
            v-for="(item,idx) in list" 
            :key='item.path'
            class="drag-list" 
            draggable="true" 
            >
                <img :src="item.path" alt="" />
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name:"drag-image-list",
    props:{
        list: Array,
    },
    data(){
        return {
            draging:null,//被拖拽的对象
        }
    },
    methods:{
        onDragStart(event){
            console.log("start");
            this.draging = event.target;
        },   
        onDragOver(event){
            console.log('drag move')
            event.preventDefault();
            let target = event.target;
                //因为dragover会发生在ul上,所以要判断是不是li
            if (target.nodeName === "LI" && target.childNodes[0].src !== this.draging.childNodes[0].src) {
                let idx_drag = this._index(this.draging)
                let idx_target = this._index(target)
                let _list = this.list
                let _drag = this.list[idx_drag]
                if(idx_drag>idx_target){
                    _list.splice(idx_target,0,_list[idx_drag]);
                    _list.splice(idx_drag+1,1)
                }else{
                    _list.splice(idx_target+1,0,_list[idx_drag]);
                    _list.splice(idx_drag,1)
                }
                console.log(_list[0].path)
            }
        },
        onDragEnd(event){
            console.log('end event')
        },
        _index(el){
            var index = 0;
            if (!el || !el.parentNode) {
                return -1;
            }
            while (el && (el = el.previousElementSibling)) {
                index++;
            }
            return index;
        },
    }
}
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持NICE源码。

免责声明:
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

NICE源码网 JavaScript vue实现图片拖动排序 https://www.niceym.com/18297.html

常见问题
  • 请您联系网站客服QQ,79024519,将第一时间处理您的问题,咨询请提供会员ID以及资源编号!
查看详情
  • 本站发布的压缩包如遇需要解压密码请尝试本站域名:www.niceym.com (通常为小写,如不对可试试大写) 或者:niceym.com 如遇无法解压,请您提供资源编号发送给本站客服!
查看详情