Google's material spec - resort bootstraps list-group

gistfile1.coffee

  class ResortableInstance
    sort: (e) ->
  
      @$('.controller-icons .glyphicon').addClass 'disabled'
  
      isUp = $(e.currentTarget).hasClass('glyphicon-arrow-up')
      isDown = $(e.currentTarget).hasClass('glyphicon-arrow-down')
      return unless isUp or isDown
  
      $li = $(e.currentTarget).parents('.list-group-item:first')
      $listItems = @$('.my-list-group > .list-group-item').css
        position: 'relative'
  
      index = null
      $listItems.each (n, el) =>
        if el is $li[0] then index = n
  
      liHeight = $li.outerHeight()
  
      if isUp and index isnt 0
        method = 'insertBefore'
        $partner = $listItems.eq(index - 1)
        partnerHeight = $partner.outerHeight()
        liCSS = marginTop: - (-1 + partnerHeight)
        partnerCSS = marginTop: (-1 + liHeight)
      else if isDown and index isnt $listItems.length - 1
        method = 'insertAfter'
        $partner = $listItems.eq(index + 1)
        partnerHeight = $partner.outerHeight()
        liCSS = marginTop: -1 + partnerHeight
        partnerCSS = marginTop: - (-1 + liHeight)
  
      $li.addClass('material-shadow-1').css
        zIndex: 10
        transition: '.1s ease-out'
      makePlaceholder = ($el) =>
  
        $placeholder = $('<div class="material-placeholder">').css marginBottom: - 1
        $placeholder.css height: $el.outerHeight()
        $el.wrap($placeholder).css
          width: $el.outerWidth()
          position: 'absolute'
  
      $liPlaceholder = makePlaceholder $li
      $partnerPlaceholder = makePlaceholder $partner
  
  
      setTimeout => 
  
        css = transition: '.5s ease-out'
        $li.css _.extend _.clone(css), liCSS
        $partner.css _.extend _.clone(css), partnerCSS
  
        setTimeout =>
          $li.css
            transition: '.25s ease-in'
          $li.removeClass 'material-shadow-1'
          setTimeout =>
            $li.removeAttr('style').unwrap('.material-placeholder')
            $partner.removeAttr('style').unwrap('.material-placeholder')
            $li[method] $partner
            @callback?()
          , 250
        , 500
      , 100

gistfile2.styl

.material-shadow-0 {
    box-shadow: 0 0px 0px 1px #eee, 0 0px 0px 1px #eee;
}
.material-shadow-1 {
    z-index: 2
    transform: scale(1.05)
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.material-shadow-2 {
    z-index: 3
    transform: scale(1.10)
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2);
}
.material-shadow-3 {
    z-index: 4
    transform: scale(1.15)
    box-shadow: 0 17px 50px 0 rgba(0, 0, 0, 0.19), 0 12px 15px 0 rgba(0, 0, 0, 0.24);
}
.material-shadow-4 {
    z-index: 5
    transform: scale(1.20)
    box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21), 0 16px 28px 0 rgba(0, 0, 0, 0.22);
}
.material-shadow-5 {
    z-index: 6
    transform: scale(1.25)
    box-shadow: 0 40px 77px 0 rgba(0, 0, 0, 0.22), 0 27px 24px 0 rgba(0, 0, 0, 0.2);
}

gistfile3.txt

This assumes you have a bunch of list group items, each with an up and down arrow to re-sort.