vue+element拖动排序功能

vue+element拖动排序功能

安装npm install vuedraggable -S

引用import draggable from 'vuedraggable'

注册组件components: { draggable },
通过draggable标签来使用

代码

 <draggable 
            v-model="urlPic" :move="onMove" 
            @start="isDragging=true" 
            @end="isDragging=false" 
            @update="datadragEnd" 
            :options="{animation:200}"
            class="spaceStart" style="flex-wrap: wrap;"
        >
            <div class="picUpload_wrap mgpic"
                v-for="(item, index) in urlPic" :key="index"
            >
                <div class="delet_pic" @click="deletPic(index)">
                    <i class="el-icon-delete"></i>
                </div>
                <el-image class="picUpload_pic" :src="item" :preview-src-list="urlPic"></el-image>
            </div>
        </draggable>

async datadragEnd(evt){
                evt.preventDefault();
                let arr = this.urlPic;
                this.$emit('dragSuccsessList', arr, this.nameKey)
            },
            onMove({ relatedContext, draggedContext }) {
                const relatedElement = relatedContext.item;
                const draggedElement = draggedContext.item;
            },