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>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。