vue中多張圖片的隨意拖拽

近期項目中遇到多張圖片隨意拖拽解決圖片排序，方便后台按順序保存問題，特此記錄一下，親測可用

實現的效果如下：

 

 

 

html中：

<transition-group tag="div">
　　<div class="item" v-for="(item,index) in items" :key="index" style="display: inline-block"
   　　draggable="true" @dragstart="handleDragStart($event, item)"  @dragover.prevent="handleDragOver($event, item)"
   　　@dragenter="handleDragEnter($event, item)"   @dragend="handleDragEnd($event, item)" >
       <div style="margin-top: 10px">
       　　<a :href="item" target="_blank">
          　　<img :src="item" style="width: 120px; height: 120px">
       　　</a>
  　　 <div style=" background-image: url(/static/images/delete.png); width: 20px;height: 20px;
       　　 -moz-background-size:100% 100%;background-size:100% 100%;
           position: relative; left: -15px; top: -50px;display: inline-block" @click="removeThumbnail(index)"></div>
       </div>
   </div>
</transition-group>

script代碼：

<script>
export default {
 name: 'Toolbar',
 data () {
  return {
   items: [
　　　　"/static/uploads/af/43/af43e036-f463-4f84-8e8e-ace11c612d6b.jpg",
　　　　"/static/uploads/f0/0a/f00ab360-b8ef-4f14-b29c-9fda2234c6ce.jpg",
　　　　"/static/uploads/e8/f9/e8f930b6-2210-4532-abc9-559033a2c1f0.jpg",
　　　　"/static/uploads/d2/0e/d20e6e4a-afae-49ef-a308-ca2d410a6b6b.jpg"

　　　　],
    dragging: null
  }
 },
 methods:{
    handleDragStart(e,item){
    　　this.dragging = item;
    },
    handleDragEnd(e,item){
    　　this.dragging = null
    },
    //首先把div變成可以放置的元素，即重寫dragenter/dragover
    handleDragOver(e) {
    　　e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中針對放置目標來設置!
    },
    handleDragEnter(e,item){
    　　e.dataTransfer.effectAllowed = "move"//為需要移動的元素設置dragstart事件
    　　if(item === this.dragging){
      　　return
    　　}
    const newItems = [...this.items]
    console.log(newItems)
    const src = newItems.indexOf(this.dragging)
    const dst = newItems.indexOf(item)
 
    newItems.splice(dst, 0, ...newItems.splice(src, 1))
 
    this.items = newItems
　　 console.log(this.items)  //這里是返回的圖片的排序
    }
  } 
} 
</script>