Issue with "Sortable" Virtual List

1

I created a virtual list with sortable option enabled.

Virtual List allows to render lists with huge amount of elements without loss of performance. And it is fully compatible with all Framework7 components which work with lists such as Search Bar, Infinite Scroll, Pull To Refresh, Swipeouts (swipe-to-delete) and Sortable.

The issue is that when I drag an item (let’s say the first one) in direction of the end of the list, my item disappears when the VL redraw a new set of elements (= ~50 items below with my current height parameters).

Is there a solution to make “sortable” work with “virtual list”? :slight_smile:

I paste my code below.

And, btw, is there a way to have an event fired every time the sorted element “moves” another element? I would like to trigger an haptic feedback when it happens.

Thank you for your help!

<template>
  <f7-page name="sort" hide-navbar-on-scroll>
    <f7-navbar>
      <f7-nav-left>
      <f7-nav-title>Classement</f7-nav-title>
    </f7-navbar>
    <f7-list
      sortable
      sortable-enabled
      @sortable:sort="onSort"
      class="sort-list"
      virtual-list
      :virtual-list-params="{
        items,
        renderExternal,
        height: theme.ios ? 44 : theme.md ? 52 : 77,
      }"
    >
      <f7-list-item
        v-for="(item, index) in vlData.items"
        :key="item.id"
        :title="item.title + ' ' + index"
        link="/product/"
        :style="`top: ${vlData.topPosition}px`"
      >
        <template #after>
          <f7-button icon-material="sentiment_neutral" />
          <f7-button icon-material="favorite_border" />
        </template>
      </f7-list-item>
    </f7-list>
  </f7-page>
</template>

<script>
import { useStore, theme } from "framework7-vue";
import { ref } from "vue";

export default {
  setup() {
    const items = useStore("products");
    const vlData = ref({
      items: [],
    });
    const renderExternal = (vl, newVlData) => {
      vlData.value = newVlData;
    };
    const onSort = (from, to, el) => {
      console.log(from, to, el);
    };
    return {
      theme,
      items,
      vlData,
      renderExternal,
      onSort,
    };
  },
};
</script>
2

that could be a tricky to make work together as the point of VL is that it removes items out of view, and apparently it removes the item you are currently dragging. But I will take a look at it as it requires more time and work to do if possible

Just added new sortableMove event that should be trigger on each “rearrangement” during the sortable drag. Will be available in next update

1 Like
3

I thought it would be complicated, so I was glad the documentation said it had already been taken care of for me! :laughing: I’ll try to look into it by myself, but it is probably over my competencies.

For information, there are “2” issues :
1/ when the new group of lines is added, they are not targeted by the function that translate them when the moved element pass over
2/ when the first group of lines is removed, the moved element disappears

Anyway, thanks for your answer, and for the sortableMove event!