### Two Lists Data (List 1)

Source: https://vue-draggable-plus.pages.dev/demo/tow-list

Initial data structure for the first list. This JSON represents the items that will be displayed and made draggable.

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

--------------------------------

### Two Lists Data (List 2)

Source: https://vue-draggable-plus.pages.dev/demo/tow-list

Initial data structure for the second list, derived from the first list with modified names and IDs. This ensures distinct items for the second list.

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

--------------------------------

### Function Usage for Two List Drag and Drop

Source: https://vue-draggable-plus.pages.dev/demo/tow-list

Implements drag and drop sorting between two lists using the useDraggable composable function. Ensure the 'group' option is set to enable cross-list interactions.

```html
<template>
  <div class="flex">
    <section
      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
      ref="el1"
    >
      <div
        v-for="item in list1"
        :key="item.id"
        class="cursor-move h-30 bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </section>
    <section
      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
      ref="el2"
    >
      <div
        v-for="item in list2"
        :key="item.id"
        class="cursor-move h-30 bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </section>
  </div>
  <div class="flex justify-between">
    <preview-list :list="list1" />
    <preview-list :list="list2" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useDraggable } from 'vue-draggable-plus'
const list1 = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])
const list2 = ref(
  list1.value.map(item => ({
    name: `${item.name}-2`,
    id: `${item.id}-2`
  }))
)

const el1 = ref()
const el2 = ref()

useDraggable(el1, list1, {
  animation: 150,
  ghostClass: 'ghost',
  group: 'people',
  onUpdate: () => {
    console.log('update list1')
  },
  onAdd: () => {
    console.log('add list1')
  },
  remove: () => {
    console.log('remove list1')
  }
})

useDraggable(el2, list2, {
  animation: 150,
  ghostClass: 'ghost',
  group: 'people',
  onUpdate: () => {
    console.log('update list2')
  },
  onAdd: () => {
    console.log('add list2')
  },
  remove: () => {
    console.log('remove list2')
  }
})
</script>
```

--------------------------------

### Component Usage for Two List Drag and Drop

Source: https://vue-draggable-plus.pages.dev/demo/tow-list

Implements drag and drop sorting between two lists using the VueDraggable component. Configure the 'group' prop to enable cross-list dragging.

```html
<template>
  <div class="flex">
    <VueDraggable
      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
      v-model="list1"
      animation="150"
      ghostClass="ghost"
      group="people"
      @update="onUpdate"
      @add="onAdd"
      @remove="remove"
    >
      <div
        v-for="item in list1"
        :key="item.id"
        class="cursor-move h-30 bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </VueDraggable>
    <VueDraggable
      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
      v-model="list2"
      animation="150"
      group="people"
      ghostClass="ghost"
      @update="onUpdate"
      @add="onAdd"
      @remove="remove"
    >
      <div
        v-for="item in list2"
        :key="item.id"
        class="cursor-move h-30 bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </VueDraggable>
  </div>
  <div class="flex justify-between">
    <preview-list :list="list1" />
    <preview-list :list="list2" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
const list1 = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])
const list2 = ref(
  list1.value.map(item => ({
    name: `${item.name}-2`,
    id: `${item.id}-2`
  }))
)
function onUpdate() {
  console.log('update')
}
function onAdd() {
  console.log('add')
}
function remove() {
  console.log('remove')
}
</script>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.