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


Here is the full sortable list page example:

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

    <!-- Sortable list -->
      <f7-list-item v-for="item in items" :title="'Item ' + item"></f7-list-item>
  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);