| 本文实例为大家分享了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
vue实现右上角时间显示实时刷新
前端JavaScript中的反射和代理 |
