最近有个需求是需要在web端定制手机的界面UI（具体实现比较复杂，此处不做阐述，此文章只说明拖拽效果实现），为了方便用户操作，就想实现这种效果：从右侧的图标列表中拖拽图标到左侧模拟的手机界面上，实现效果图如下：

拖拽效果示例代码（使用了H5的拖拽属性）：

<template>
  <div>
    <div
      draggable="true"
      style="height: 100px; width: 200px; color: red"
      @drag="drag($event)"
      @dragend="dragend($event)"
      @dragstart="dragstart($event, dataStart)"
    >
      {{ dataStart }} [tip: 拖动我到目的地]
    </div>
    <div style="height: 100px; width: 200px; color: blue" draggable="false" @dragleave="dragleave($event)" @dragover="dragover($event)" @drop="drop($event)">
      <span>目的地：{{ dataEnd }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dataStart: 'Hello World',
        dataEnd: '拖到我这里停止',
      }
    },
    methods: {
      dragstart(e, data) {
        //【开始拖动，并获取拖动的对象】
        console.log('拖拽开始')
        console.log(data)
      },
      drag(e) {
        console.log('拖拽中')
      },
      dragend(e) {
        console.log('拖拽结束')
      },

      dragleave(e) {
        console.log('拖拽离开')
      },
      dragover(e) {
        //【拖拽结束，此处一般不放其他代码】
        e.preventDefault()
        console.log('拖拽到这')
      },
      drop(e) {
        console.log('拖拽停止')
        //此处才算拖拽成功
        alert('松手！')
        //执行后续代码逻辑
        this.dataEnd = this.dataStart
      },
    },
  }
</script>

<style scoped></style>

实际使用中，一般只需使用到dragstart、dragover、drop即可，拖拽对象/区域使用dragstart，目标对象/区域使用drop，使用这个简单拖拽效果可以实现很多复杂好用的功能。