vue轮播图拖拽放置任意位置功能实现（拖动改变顺序）

<template>
    <div class="container" >
        <div class="topOperate flex-btw">
            <div class="left flex">
                <div class="add">+</div>
                <span class="text">Upload New Image(s)</span>
            </div>
            <div class="right flex">
                <i class="iconfont icon45-01"></i>
                <span class="text">Drag to reorder</span>
            </div>
        </div>
        <div class="uploadSwiper m-a">
            <div class="swiper-father pos-r">
                <swiper class="swiper" :class="screenWidth <= 768 ? '' : 'swiper-no-swiping'" :options="swiperOption"  >
                    <swiper-slide class="J_file bs pos-r" v-for="(item,index) in list" :key="index" :data-obj="'J_file_'+index">
                        <div class="drop-left"></div>
                        <label :for="'J_file_'+index">
                            <div class="uploadBefore flex flex-col pos-a">
                                <p>+</p>
                                <span>Click to upload</span>
                            </div>
                        </label>
                        <input type="file" :id="'J_file_'+index" />
                        
                        <div class="imgPart w-h100 pos-a" :id="'J_img_'+index" v-if="index == 0 || index == 1">
                            <i class="iconfont icon30-01 pos-a"></i>
                            <img :src="item.pic" draggable="true" :data-obj="'J_file_'+index" alt />
                            <div class="editBtn pos-a pos-center"  @click="showPopup = true">
                                <EditBtn></EditBtn>
                            </div>
                        </div>
                        <div class="drop-right"></div>
                    </swiper-slide>
                </swiper>
                <LeftBtn class="prev"></LeftBtn>
                <RightBtn class="next"></RightBtn>
            </div>
        </div>
        <div class="writePart flex-btw">
            <div class="left">
                <input class="titleWrite bs" type="text" placeholder="Add a post title" />
                <div class="writeBoard"><Editor :height="1000" :toolbarItems="toolbarItems"></Editor></div>
                <input class="titleWrite bs" type="text" placeholder="Category Tags
" />
            </div>
            <div class="right">
                <div class="contentBox bs">
                    <div class="titleWrap">
                        <i class="iconfont icon46-01"></i>
                        <span>Lastest Drafts</span>
                    </div>
                    <div class="item">
                        <div class="desc">Exploring life</div>
                        <ul class="pics">
                            <li class="pic" v-for="(item,index) in 3" :key="index">
                                <img src="./../../../static/images/pic3.png" alt class="w-h100" />
                            </li>
                        </ul>
                    </div>
                    <div class="item">
                        <div class="desc">Exploring life</div>
                        <ul class="pics">
                            <li class="pic" v-for="(item,index) in 3" :key="index">
                                <img src="./../../../static/images/pic3.png" alt class="w-h100" />
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="contentBox contentBox2 bs">
                    <div class="titleWrap flex">
                        <div class="logo">
                            <img src="./../../../static/images/logo3.png" alt class="w-h100" />
                        </div>
                        <span>Set Access Level</span>
                    </div>
                    <div class="selectWrap">
                        <ul class="select">
                            <li class="li flex">
                                <label class="checkBox">
                                    <input type="checkbox" />
                                </label>
                                <span class="text">Tire 1 - Liketu Fans</span>
                            </li>
                            <li class="li flex">
                                <label class="checkBox">
                                    <input type="checkbox" />
                                </label>
                                <span class="text">Tire 1 - Liketu Fans</span>
                            </li>
                            <li class="li flex">
                                <label class="checkBox">
                                    <input type="checkbox" />
                                </label>
                                <span class="text">Tire 1 - Liketu Fans</span>
                            </li>