vue元素拖拽、移動

使用范圍：兩個元素位置交換，移動元素到指定位置

 

涉及函數

屬性	解釋
draggable	是否允許元素進行拖拽
dragstart	拖拽開始觸發的函數，可在此獲取元素
dragover	在目標元素內進行拖動時觸發的函數
dragenter	當拖拽進入目標元素時出發的函數
dragend	拖拽結束

快速熟悉上邊表格的知識點，然后結合如下的小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>

資源搜索網站大全 http://www.szhdn.com

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;禁止拖拽。