Framework7 Sortable List

Sortable lists is an extension of list view that allows you to sort list view elements.

HTML

<link rel="stylesheet" href="https://framework7.io/dist/css/framework7.ios.min.css">
<link rel="stylesheet" href="https://framework7.io/dist/css/framework7.ios.colors.min.css">
<script src="https://framework7.io/dist/js/framework7.min.js"></script>
<div class="views">
  <div class="view view-main">
    <div class="pages">
      <div data-page="home" class="page navbar-fixed">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="left"> </div>
            <div class="center">Sortable API</div>
            <div class="right"> </div>
          </div>
        </div>
        <div class="page-content">
          <div class="content-block">
            <p><a href="#" class="open">Enable sortable</a></p>
            <p><a href="#" class="close">Disable sortable</a></p>
            <p><a href="#" class="toggle">Toggle sortable</a></p>
          </div>
          <div class="list-block sortable">
            <ul>
              <li>
                <div class="item-content">
                  <div class="item-media"><i class="icon icon-f7"></i></div>
                  <div class="item-inner">
                    <div class="item-title">Item 1</div>
                    <div class="item-after">$10</div>
                  </div>
                </div>
                <div class="sortable-handler"></div>
              </li>
              <li>
                <div class="item-content">
                  <div class="item-media"><i class="icon icon-f7"></i></div>
                  <div class="item-inner">
                    <div class="item-title">Item 2</div>
                    <div class="item-after">$20</div>
                  </div>
                </div>
                <div class="sortable-handler"></div>
              </li>
              <li>
                <div class="item-content">
                  <div class="item-media"><i class="icon icon-f7"></i></div>
                  <div class="item-inner">
                    <div...

JavaScript

var myApp = new Framework7();

      var $$ = Dom7;

      $$('.open').on('click', function() {
        myApp.sortableOpen('.sortable');
        alert("sortable opened");
      });
      $$('.close').on('click', function() {
        myApp.sortableClose('.sortable');
        alert("sortable closed");
      });
      $$('.toggle').on('click', function() {
        myApp.sortableToggle('.sortable');
        alert("sortable toggled");
      });
			
      $$('li').on('sortable:sort',function(){
      	alert("Sorted");
      });