H5拖拽效果（一）「这是我参与2022首次更文挑战的第15天，活动详情查看：2022首次更文挑战」上一篇说到，在页面中

「这是我参与2022首次更文挑战的第15天，活动详情查看：2022首次更文挑战」
上一篇说到，在页面中，拖拽能给用户起到很好的体验效果，也介绍了用JavaScript实现了一种拖拽方法；这次就用更简单的方式来实现拖拽。

拖拽事件

使用JavaScript来实现拖拽实在太麻烦了，或许是大神们看到我等凡夫俗子的辛苦后，决定解救我等，于是出了H5的拖拽功能。实现很简单，只要给目标物体加上draggable="true"，这个物体就可以实现视觉上的拖拽效果；draggable是接受布尔值，只能传进true或者false;如下列代码，即可实现div的拖拽效果。

<div
    draggable="true">
    <span>子元素</span>
 </div>

拖拽，不仅仅是要视觉效果，我们还需要数据处理，这时，大神们就提供了一些事件，在拖拽的过程中，会在某些阶段给予某个事件，让我们可以在某些特定的阶段来将数据做相应的处理。有如下一些事件：

dragstart：鼠标点击被拖动物体并开始拖动时触发
drag：在dragstart事件触发后就开始触发这个事件，并是在移动的时候持续触发，大概几百毫秒就触发一次
dragover：被拖动的物体移动到一个有效的目标物体时触发
dragenter：被拖动物体进入一个有效的放置目标时触发，只会在进去的时候触发并只有一次，进去一次就触发一次
dragleave：被拖动物体离开一个有效的目标元素时触发
drog：被拖拽物体移动到有效的放置目标并且被释放时，就立马触发事件

使用方式

  <div id='app'>
    <div id="drag"
      draggable="true" 
      @dragstart="dragstart"
    ></div>
    <div id="drop"
      @dragover="dragover"
      @dragenter="dragenter"
      @dragleave="dragleave"
      @drop="drop"
    >
    </div>
  </div>

new Vue({
  el: "#app",
  data: {},
  methods: {
    dragstart(event) {
      console.log('dragstart')
    },
    dragover(event) {
      event.preventDefault()
      console.log('dragover')
    },
    dragenter(event) {
      console.log('dragenter')
    },
    dragleave(event) {
      console.log('dragleave')
    },
    drop(event) {
      console.log('drop')
    },
  }
})

上面的代码就是一个简单的视觉拖动效果，没有任何数据的处理；里面有两个元素drag和drop；当我们点击drag并开始移动鼠标时，就立马触发dragstart事件打印'dragstart'；当我们的鼠标移动进入drop时，就立马触发了dragenter事件，然后在drop里面移动鼠标就一直触发dragover，一直打印着'dragover'，直到松开鼠标将数据放到drop里，触发drop事件就结束了；或者，不松开鼠标，直接将鼠标移动出来，就会触发dragleave事件。
这里有个需要注意的，就是要在dragover事件里面阻止默认事件，这样drop才能变成有效的目标，鼠标的样式才会变成加号。
不能在dragover事件中传递消息，因为dragover事件的作用对象是目标区域，即dragover中的DragEvent是以目标放区身份施加的，故而不会传递到drop中。