index.en-US.md

map
path /demo/target-container

Specify the target container

Since many components that need to be dragged are not our immediate child elements in our usual use, we need to specify a target container to complete the drag function. We can specify the target container through the target attribute.

Here we take the third-party component as an example, assuming el-table is a third-party component

::: warning Note: As long as you can ensure that the target element obtained is correct, our function can be completed. If you find that the target element is not found during use, please check whether the selector you entered is correct. :::

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>

Component Usage

Function Usage

Precautions

When using function, please ensure that there is only one root element in the component

Error Usage

This usage is wrong because it contains multiple root elements

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

Correctly Usage

This way is correct as it has only one root element

<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>