元素拖拽到另一个区域

源元素

// draggable="true" 设置元素是否可拖拽
<div id="onDraggable" ref="onDraggable"  v-for="(item, index) in data"
:draggable="true"  
@dragstart="dragstart($event, item)">
    <div class="m-6 text-center">
        <img src="@/assets/template.png" alt="" class=" h-20 w-20">
        <span>{{ setName(item) }}</span>
    </div>
</div>

拖拽区域

<div id="toDraggable" ref="toDraggable" class="w-full flex flex-wrap  basis-3/5 mr-5 drop- content" v-loading="layoutRequest.loading.value" @dragover.prevent @drop="drop">
    <div class=" box-content relative dpc-content" :style="'width:' + wrapSize.width +  'px;height:' + wrapSize.height + 'px;border:1px solid #ccc;'">
        <el-tooltip v-for="item in layoutRequest.data.value" :key="item.id" :content="item.name" placement="top-start">
            <div
            class="absolute border border-dashed border-main cursor-pointer overflow-hidden flex justify-center items-center"
            :style="{ width: item.width / ratio + 'px',
            height: item.height / ratio + 'px',
            left: item.left / ratio + 'px',
            top: item.top / ratio + 'px' }"
            @click="edit(item,1)">
                {{ item.name }}
             </div>
        </el-tooltip>
    </div>
</div>

javaScript(效果图详细略...)

<script lang="ts" setup>
const dragstart = (e: any, data: any) => {
    alert('开始拖拽事件')
}
const drop = (e: any, data: any) => {
    alert('鼠标松开事件')
}
</script>

效果图