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

Id	Name
1	Joao
2	Jean
3	Johanna
4	Juan

[
  {
    "name": "Joao",
    "id": "1"
  },
  {
    "name": "Jean",
    "id": "2"
  },
  {
    "name": "Johanna",
    "id": "3"
  },
  {
    "name": "Juan",
    "id": "4"
  }
]

Use components to manipulate target containersIt will use Vue Draggable as the root element to find the nearest .el-table selector

复制成功!

<template>
  <section>
    <div>
      <VueDraggable v-model="list" :animation="150" target=".el-table">
        <ElTable :list="list"></ElTable>
      </VueDraggable>
    </div>
    <div class="flex justify-between">
      <preview-list :list="list" />
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
import ElTable from './ElTable.vue'

const list = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])
</script>

Function Usage

Id	Name
1	Joao
2	Jean
3	Johanna
4	Juan

[
  {
    "name": "Joao",
    "id": "1"
  },
  {
    "name": "Jean",
    "id": "2"
  },
  {
    "name": "Johanna",
    "id": "3"
  },
  {
    "name": "Juan",
    "id": "4"
  }
]

Use function to manipulate target containersHere, in order to ensure that we can get our target container, we added an id my-container to the div element. Of course, if you can ensure that the target container must be obtained, you can omit the parent element id

复制成功!

<template>
  <div>
    <div id="my-container">
      <ElTable :list="list"></ElTable>
    </div>
    <div class="flex justify-between">
      <preview-list :list="list" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from 'vue'
import { useDraggable } from 'vue-draggable-plus'
import ElTable from './ElTable.vue'

const vm = getCurrentInstance()
onMounted(() => {
  console.log(vm)
})
const list = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])

useDraggable('#my-container .el-table', list)
</script>

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>