VUE elements drag, move

Drag and drop elements

作者：一粒尘土  时间：2019-10-30 
使用范围：两个元素位置交换，移动元素到指定位置

Involving function

Attributes	Explanation
draggable	Whether to allow drag and drop elements
dragstart	Drag start function is triggered, available elements in this
dragover	Function triggered when the drag element within the target
dragenter	Function when dragged into the target elements departure
bearing	Drag the end

Fast familiar with the top table of knowledge, combined with a small demo then be as follows enhance memory

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)
      /**
       * 进行拖拽完成的操作
       */
    },
    
}

annotation

• For there to be another case of dragging monitor elements, you can call the corresponding function can be.
• If not dragged into the element region, may be provided at dropEffect dragover, dragenter in: none; drag prohibited.

---

Welcome to the concern of my micro-channel public number, learn together and progress together

Small scholar Code