vuedraggable拖拽删除实现

vuedraggable做组件化拖拽实现了排序，但是想实现拖拽到某一个位置进行删除， 看了官方文档没有相关的demo

简单实现的demo

看了一个demo是两个vuedraggable组件可以进行拖拽移动，这个时候有了一个想法，将其vuedraggable组件隐藏 （opacity：0,z-index:9999） 起来不就可以了，拖拽开始时就把对应的delete元素展示出来，结束再隐藏起来,

关键代码

<template>
  <div class="dragList-list2">
    <div id="picBox" class="dragList-list2" :style="{background:config.backgroundColor}">
      <Draggable v-bind="$attrs" class="dragArea" id="draggaBox" :list="list" item-key="id" group="TpFormGroup" :disabled="false" @start="start" @end="end" @move='onMove'>
        <template #item="{ element }">
          <div>
            <component :config="config" :is="element.com" :options='element' @changeJson="changeJson(element,ContentSetting,$event)"></component>
          </div>
        </template>
      </Draggable>
      <Tabbar :config="config" @click="changeJson('',TabbarSetting)"></Tabbar>
    </div>
    <Draggable :list="state.list2" class="deleteBox" item-key="id" group="TpFormGroup" :disabled="false" @start="start2" @end="end2">
      <template #item="{ element }">
        <div>{{element.name}}</div>
      </template>
    </Draggable>
    <div v-if="state.remove" class="delete">delete</div>
  </div>
</template>

//拖拽开始显示delete
const start = (e) => {
  state.remove=true
};
//拖拽结束隐藏delete
const end = (e) => {
  state.remove=false
};

.deleteBox {
  position: absolute;
  right: -160px;
  width: 100px;
  height: 100px;
  opacity: 0;
  z-index: 99999;
}
.delete {
  visibility: visible;
  height: 100px;
  position: absolute;
  width: 100px;
  right: -160px;
  background-color: red;
}