本文实例为大家分享了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>

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用纯JS如何做到双向绑定，思路和方法是什么

  对于vue下的双向绑定功能，个人理解为在处理逻辑的过程中缓存了大量的node对象，node对象可以是html标签、文本内容。既然选择了缓存这些对象，那么在用的过程中哪里需要改变就把node拿出来，进行标签属性的变更或者文本内容的修改。本文主要讲了如何实现双向绑定

• nuxt中怎么样引入组件及使用？

  本文给大家分享的是关于nuxt中引入组件的操作和引入公共样式的操作，另外还有在nuxt项目中使用component组件的介绍，感兴趣的朋友也可以了解看看，对新手学习nuxt引入组件和使用组件有一定的帮助，那么接下来就跟随小编一起了解一下吧。

• webpack如何进行安装和配置，用法是什么

  目录一、webpack介绍1、由来2、介绍3、作用4、拓展说明5、webpack整体认知二、webpack安装1、安装node2、安装cnpm3、安装nrm的两种方法4、安装webpack三、webpack配置0、搭建项目结构1、初始化一个项目（会创建一个package.json文件）2、在当前的项目中安装Webpac

• npm install安装报错是怎么回事，该怎么办

  当你跑起一个项目的时候,第一步需要先安装依赖npm install,下面这篇文章主要给大家介绍了关于npm install安装报错的几种常见情况,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

• JS中隐藏html标签怎么做，方法是什么

  方法：1、利用“document.getElementById("id")”语句根据id值获取指定的html标签元素对象；2、利用“标签元素对象.style.display="none";”语句将获取到的html标签元素隐藏即可。