VUE 元素拖拽、移动

元素拖拽

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

涉及函数

属性	解释
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>

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

---

欢迎大家关注我的微信公众号，一起学习一起进步

代码小书生