元素拖拽

作者：一粒塵土  時間：2019-10-30 
使用範圍：兩個元素位置交換，移動元素到指定位置

涉及函數

快速熟悉上邊表格的知識點，然後結合如下的小demo進行加深記憶

html

<div
  :key="imgIdx"
  v-for="(img, imgIdx) in result"
  :style="'background-image: url('+img.gallery_image_url+');'"
  class="dib wi-17x ht-11x bdr-3 centerimage mr-14 mb-14 pr of-h hover-item graylight-bg"
  :draggable="allowHandle"
  @dragenter="dragEnter($event, img)"
  @dragend="dragEnd($event, img)">
</div>

js

data () {
    return {
        drawTargetEle: {}
    }
},
methods: {
    /**
     * 推拽開始，解決火狐無法拖拽情況
    */
    dragStart (e, item) {
      if (this.allowHandle) {
        e.dataTransfer.setData('aaa', null)
      }
    },
    /**
     * 拖拽元素至目標元素內時觸發
     * @item 目標元素
     * @info 可在此處獲取，拖拽元素的一系列屬性
    */
    dragEnter (e, item) {
      if (this.allowHandle) {
        // 獲取推拽的目標元素
        this.drawTargetEle = item
      }
    },
    /**
     * 拖拽完成之後觸發
     * @item 目標元素
     * @info 可在此處獲取，拖拽元素的目標元素一系列屬性
    */
    dragEnd (e, item) {
      console.log(item)
      /**
       * 進行拖拽完成的操作
       */
    },
    
}

註解

• 另外如需有需監聽元素的拖拽情況，可調用對應的函數即可。
• 如果不允許拖動到該元素區域內，可在dragover、dragenter中設置dropEffect：none;禁止拖拽。

歡迎大家關註我的微信公眾號，一起學習一起進步

代碼小書生