Implementing pagination: How to disable Dragging and Hide particular items based on index

[signmeuptwice]

I need to implement pagination. To do this I need to be able to hide items and ideally also disable dragging at the same time.

so I tried to use v-show on items; it works fine but I am left with blank spaces and they are impossible to remove. as you can see in my code below I also have to convert my item id to index because I cannot get it from draggable ?

so here are my 3 questions:

• how to hide items ?
• how to disable dragging ?
• is there a way to get the item index from draggable

Thank you; I hope you can help me out on this.

  <draggable
        v-if="loaded"
        v-model="medias"
        transition="100"
        class="media-list-wrapper drop-zone"
        @update:modelValue="showUpdateOrder = true"
    >
      <template v-slot:item="{ item }" class="draggable-template">

        <div v-show="inRange(indexFromId(item.id))" :class="getMediaClass()">

Thank you