VUE 使用 HTML5原生拖放（draggable）

vue使用 HTML5 原生拖放

拖放事件

• ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上

• ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上

• ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上

• ondragleave 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上

• ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上

• drop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上

完成一次拖放的事件过程是： dragstart –> dragenter –> dragover –> drop –> dragend

• event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。

• DataTransfer 对象：拖拽对象用来传递数据的媒介，使用一般为event.dataTransfer。

  • event.dataTransfer.setData() 方法设置被拖动数据的数据类型和值

  • event.dataTransfer.getData() 方法获得被拖的数据

  • event.dataTransfer.setDragImage() 指定图片或者文档元素做拖动时的视觉效果。在被拖拽的元素中首先添加mousedown事件，用于在dragstart事件前生成图片内容

var img = new Image();
img.src = '图片的路径或者svg格式的代码等'

onStart(e) {
	// 设置自定义鼠标拖拽过程中显示的图像
	e.dataTransfer.setDragIamge(img, xOffset, yOffset)
}

1. 把元素设置为可拖放

首先：为了把一个元素设置为可拖放，请把 draggable 属性设置为 true：

 <div id="dragBox" draggable></div>

2. 拖放的内容 - ondragstart 和 setData()

然后，规定当元素被拖动时发生的事情。

在上面的例子中，ondragstart 属性调用了一个 onStar(e) 函数，规定拖动什么数据。

dataTransfer.setData() 方法设置被拖动数据的数据类型和值：

<div class="left box" @dragstart="onStart" @dragend="onEnd">
      <div id="dragBox" draggable></div>
</div>

<script>
   onStart(e) {
      console.log("拖拽开始");
      e.dataTransfer.setData("mydata", e.target.id);
    },
</script>

3. 拖到何处 - ondragover

ondragover 事件规定被拖动的数据能够被放置到何处。

默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式。

这个任务由 ondragover 事件的 event.preventDefault() 方法完成：

   <div
      class="right box"
      @drop="drop"
      @dragover="dragOver"
      @dragleave="dragleave"
      @dragenter="dragenter"
    ></div>

<script>
    
    dragOver(e) {
      e.preventDefault(); // 一定要执行，否则ondrop事件不会被触发
    },
        
        
</script>

4. 进行放置 - ondrop

当放开被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

   <div
      class="right box"
      @drop="drop"
      @dragover="dragOver"
      @dragleave="dragleave"
      @dragenter="dragenter"
    ></div>

<script>
    
    drop(e) {
      e.preventDefault();
      var data = e.dataTransfer.getData("mydata");
      e.target.appendChild(document.getElementById(data));
    },
        
        
</script>

demo完整代码：

<template>
  <div id="html5drag">
    <div class="left box" @dragstart="onStart" @dragend="onEnd">
      <div id="dragBox" draggable  @mousedown="mouseDown"></div>
    </div>
    <div
      class="right box"
      @drop="drop"
      @dragover="dragOver"
      @dragleave="dragleave"
      @dragenter="dragenter"
    ></div>
  </div>
</template>

<script>
export default {
  name: "html5drag",
  data() {
    return {
        img: null,
    };
  },
  methods: {
      mouseDown() {
      this.img = new Image();
      console.log(this.img);
      // this.img.src =
      //   "https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF";
      this.img.src = require("@/assets/mn.jpg");
      // this.img.style.height = 50 + "px";
      // this.img.style.width = 50 + "px";
    },
    onStart(e) {
      console.log("拖拽开始");
      e.dataTransfer.setDragImage(this.img, 10, 10);
      e.dataTransfer.setData("mydata", e.target.id);
    },
    onEnd(e) {
      console.log("拖拽结束");
    },
    drop(e) {
      e.preventDefault();
      var data = e.dataTransfer.getData("mydata");
      e.target.appendChild(document.getElementById(data));
    },
    dragOver(e) {
      e.preventDefault(); // 一定要执行，否则ondrop事件不会被触发
    },
    dragleave(e) {
      console.log("离开放置区域");
    },
    dragenter(e) {
      console.log("进入放置区域");
    },
  },
};
</script>

<style lang="scss" scoped>
#html5drag {
  display: flex;
  .box {
    height: 100px;
    width: 200px;
    border: 1px solid #000;
  }
  .left {
    margin-right: 50px;
  }
  #dragBox {
    height: 50px;
    width: 50px;
    background: blueviolet;
  }
}
</style>