Sortable Vue Component

Sortable is not a separate component, but just a particular case of using <f7-list> and <f7-list-item> components.

Sortable Events

Event Description
<f7-list> events
The following events will be available on <f7-list> when sortable prop set
sortable:enable Event will be triggered when sortable mode is enabled
sortable:disable Event will be triggered when sortable mode is disabled
sortable:sort Event will be triggered after user release currently sorting element in new position. event.detail will contain object with from and to properties with start/new index numbers of sorted list item

Examples

Here is the full sortable list page example:

<template>
  <f7-page>
    <f7-navbar back-link="Back" title="Sortable" sliding>
      <f7-nav-right>
        <!-- Link to enable/disable sortable -->
        <f7-link @click="sorting = !sorting">{{sorting ? 'Done' : 'Sort'}}</f7-link>
      </f7-nav-right>
    </f7-navbar>

    <!-- Sortable list -->
    <f7-list
      sortable
      :sortable-enabled="sorting"
      @sortable:sort="onSort"
      @sortable:enable="onEnable"
      @sortable:disable="onDisable"
    >
      <f7-list-item v-for="item in items" :title="'Item ' + item"></f7-list-item>
    </f7-list>
  </f7-page>
</template>
<script>
  export default {
    data: function () {
      return {
        sorting: false,
        items: [1, 2, 3, 4, 5]
      }
    },
    methods: {
      onEnable: function () {
        console.log('sort enabled');
      },
      onDisable: function () {
        console.log('sort disabled');
      },
      onSort: function (event, indexes) {
        console.log('sort', indexes);
      },
    }
  }
</script>