Sortable List Vue Component

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

Usage example

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 toggle-sortable="#sortable">{{sorting ? 'Done' : 'Open'}}</f7-link>
      </f7-nav-right>
    </f7-navbar>

    <f7-list id="sortable" sortable @sortable:sort="onSort" @sortable:open="onOpen" @sortable:close="onClose">
      <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: {
      onOpen: function () {
        this.sorting = !this.sorting;
      },
      onClose: function () {
        this.sorting = !this.sorting;
      },
      onSort: function (event, indexes) {
          console.log('sort', indexes);
      },
    }
  }
</script>

Renders to:

<div class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left sliding">
        <a href="#" class="back link toggle-sortable" data-sortable="#sortable">Back</a>
      </div>
      <div class="center sliding">Sortable</div>
    </div>
  </div>
  <div class="page-content">
    <div class="list-block sortable" id="sortable">
      <ul>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Item 1</div>
            </div>
          </div>
          <div class="sortable-handler"></div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Item 2</div>
            </div>
          </div>
          <div class="sortable-handler"></div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Item 3</div>
            </div>
          </div>
          <div class="sortable-handler"></div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Item 4</div>
            </div>
          </div>
          <div class="sortable-handler"></div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Item 5</div>
            </div>
          </div>
          <div class="sortable-handler"></div>
        </li>
      </ul>
    </div>
  </div>
</div>

Events

Event	Description
sortable:open	Event will be triggered when sortable mode is enabled
sortable:close	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 startIndex and newIndex properties with start/new index numbers of sorted list item