指定目标容器

由于我们平时使用的过程中，很多需要拖拽的组件并非我们的直系子元素，所以我们需要指定一个目标容器，来完成拖拽的功能，我们可以通过 target 属性来指定目标容器。

此处我们以第三方组件为例，假设el-table为第三方组件

WARNING

注意：只要您能确保获取到的目标元素是正确的，都可以完成我们的功能，如果您在使用过程中发现目标元素未找到，请检查您所输入的选择器是否正确

ElTable.vue

<template>  <table>  <thead>  <tr>  <th>Id</th>  <th>Name</th>  </tr>  </thead>  <tbody class="el-table">  <tr v-for="item in list" :key="item.name" class="cursor-move">  <td>{{ item.id }}</td>  <td>{{ item.name }}</td>  </tr>  </tbody>  </table> </template> <script setup lang="ts"> interface Props {  list: Record<'name' | 'id', string>[] } defineProps<Props>() </script>

组件使用

函数使用

注意事项

使用 function 时请保证组件内只有一个根元素

错误使用

这种用法是错误的，因为它包含多个根元素

<template>  <!-- ❌ -->  <div id="my-container">  <ElTable :list="list"></ElTable>  </div>  <div class="flex justify-between">  <pre class="code-block">{{ text }}</pre>  </div> </template>

正确使用

这种方式是正确的，因为它只有一个根元素

<template>  <!-- ✅ -->  <div>  <div id="my-container">  <ElTable :list="list"></ElTable>  </div>  <div class="flex justify-between">  <pre class="code-block">{{ text }}</pre>  </div>  </div> </template>