1. 程式人生 > 程式設計 >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="vue實現圖片拖動排序" />
            </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 (tawww.cppcns.comrget.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,_list[idx_drag]);
                    _list.splice(idx_drag+1,1)
                }else{
                    _list.splice(idx_target+1,_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"
   aQtIyzj     ref="imgList">
            <li 
            v-for="(item,idx) in list" 
            :key='item.path'
            class="drag-list" 
            draggable="true" 
            >
                <img :src="item.path" alt="vue實現圖片拖動排序" />
            </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>idxaQtIyzj_target){
                    _list.splice(idx_target,1)
                }
                console.log(_list[0].path)
            }
        },onDragEnd(event){
            console.log('end event')
        },_index(el){
            var index = 0;
            if (!el || !el.pareaQtIyzjntNode) {
                return -1;
            }
            while (el && (el = el.previousElementSibling)) {
                index++;
            }
            return index;
        },}
}
</script>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。