vue 和H5 draggable 实现拖拽并替换效果

前言

公司项目需要做拖拽替换效果，本人用的vue框架。在网上找了很多资料都是用的 Vue.Draggable(git地址)。但这个组件实现的拖拽后插入效果，我倒腾了很久也没有替换效果(如果Vue.Draggable能实现拖拽替换效果的话请大神给我留言)。

JQ有实现拖拽的插件，我下载过一个插件并看过源码，大致原理是给目标元素设置定位属性，通过监听鼠标mousedown，mouseup事件，再计算鼠标位置变化，然后给元素样式设置偏移值来实现拖拽效果的。

H5提供了专门的拖拽API 给元素添加 draggable 属性，设置为 true就能实现拖拽了。本文使用的H5提供的拖拽API 以及vue 无其他任何添加，请放心使用

直接上代码

<template>
  <div class="container">
    <div class="layout">
      <button
        class="layout-btn"
        @click="layoutType=val.value"
        v-for="val in layoutOptions"
        :key="val.value"
      >{
  {val.label}}</button>
    </div>

    <div
      class="group"
      :class="{'left-top-container': gindex===0,
        'right-top-container': gindex===1,
        'bottom-container': gindex===2,
        'top-container': gindex<2}"
      v-for="(group,gindex) in data"
      :key="gindex"
    >
      <div
        class="cls-default"
        v-for="(item,cindex) in group.children"
        :key="cindex"
        :data-id="gindex+'-'+cindex"
        draggable="true"
        @dragstart="onDragstart($event)"