vue实现图片拖动排序
更新时间：2021年10月21日 17:02:17 作者：沉末
这篇文章主要为大家详细介绍了vue实现图片拖动排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在vue项目中,将图片下载可使用流的形式,下载成单个图片,或者将多个图片下载至zip包,本文就是介绍使用a标签下载图片的用法,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下2023-10-10
这篇文章主要为大家介绍了vue中虚拟DOM与Diff算法知识的图文精讲，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
Vue.js作为现代前端开发中的佼佼者,其组件系统是构建高效、灵活和可扩展用户界面的关键,本文带大家深度探索 Vue.js 组件的核心奥义,感兴趣的小伙伴可以了解下2024-12-12
这篇文章主要为大家详细介绍了Vue实现导航栏点击当前标签变色功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要给大家介绍了关于vue3常用响应式对象api的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下2023-02-02
本文主要介绍了el-table表头文字换行的三种方式，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了element-ui中dialog弹窗关闭按钮失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
在项目中会多次使用表格展示数据,不对这个table进行二次封装成我们自己想要的,重复的代码量的工作会比较大,下面这篇文章主要给大家介绍了关于elementUI el-table二次封装的相关资料,需要的朋友可以参考下2023-03-03
Vue框架+Element-ui(el-upload组件)使用http-request方法上传文件并显示文件上传进度功能
这篇文章主要介绍了Vue框架+Element-ui(el-upload组件)使用http-request方法上传文件并显示文件上传进度功能,本通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-08-08
这篇文章主要介绍了mpvue跳转页面及注意事项的相关资料,需要的朋友可以参考下2018-08-08
最新评论