List on a scroll container

List of number example

If you have a large list of elements with a scroll, you can easily navigate through the list. First, we’re going to create a large list of numbers:

<script setup lang="ts">
  const list = ref([...Array(20).keys()]);
  const { parent } = useDragAndDrop(list);
</script>

Using useDragAndDrop

We’re going to make parent element scrollable:

<template>
  <ul ref="parent" class="number-list">
    <li class="number" v-for="(element, index) in list" :index="index">
      {{ element }}
    </li>
  </ul>
</template>
<style>
// ....
.number-list {
    display: block;
    padding-inline: 10px;
    overflow: auto;
    height: 300px;
}

</style>

Preview

This is what you got as a result: