framework7.angular/kitchen-sink-material/jade/sortable-list.jade

Full Featured Mobile HTML Framework For Building iOS & Android Apps using Angularjs

.page(data-page="sortable-list")
  .navbar
    .navbar-inner
      .left
        a(href="index.html").back.link.icon-only
          i.icon.icon-back
      .center Sortable List
      .right
        a(href="#").link.toggle-sortable.icon-only Edit
  .page-content
    .content-block
      p Just click "Edit" button on navigation bar to enable sorting
    .list-block.sortable
      ul
        li
          .item-content
            .item-media
              i.icon.icon-f7
            .item-inner 
              .item-title 1 Jenna Smith
              .item-after CEO
          .sortable-handler
        li
          .item-content
            .item-media
              i.icon.icon-f7
            .item-inner 
              .item-title 2 John Doe
              .item-after Director
          .sortable-handler
        li
          .item-content
            .item-media
              i.icon.icon-f7
            .item-inner 
              .item-title 3 John Doe
              .item-after Developer
          .sortable-handler
        li
          .item-content
            .item-media
              i.icon.icon-f7
            .item-inner 
              .item-title 4 Aaron Darling
              .item-after Manager
          .sortable-handler
        li
          .item-content
            .item-media
              i.icon.icon-f7
            .item-inner 
              .item-title 5 Calvin Johnson
              .item-after Accounter
          .sortable-handler
        li
          .item-content
            .item-media
              i.icon.icon-f7
            .item-inner 
              .item-title 6 John Smith
              .item-after SEO
          .sortable-handler
        li
          .item-content
            .item-media
              i.icon.icon-f7
            .item-inner 
              .item-title 7 Chloe
              .item-after Manager
          .sortable-handler
    .list-block.media-list.sortable
      ul
        li
          .item-content
            .item-media
              img(src="http://lorempixel.com/160/160/people/1", width="80")
            .item-inner
              .item-title-row
                .item-title Yellow Submarine
                .item-after $15
              .item-subtitle Beatles
              .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
          .sortable-handler
        li
          .item-content
            .item-media
              img(src="http://lorempixel.com/160/160/people/2", width="80")
            .item-inner
              .item-title-row
                .item-title Don't Stop Me Now
                .item-after $22
              .item-subtitle Queen
              .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
          .sortable-handler
        li
          .item-content
            .item-media
              img(src="http://lorempixel.com/160/160/people/3", width="80")
            .item-inner
              .item-title-row
                .item-title Billie Jean
                .item-after $16
              .item-subtitle Michael Jackson
              .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
          .sortable-handler