Cacher is the code snippet organizer for pro developers

<link href="http://a5hik.github.io/ng-sortable/dist/ng-sortable.min.css" rel="stylesheet" />

h1 {
  text-align: center;
}

ul {
  padding: 0;
  width: 400px;
  margin: 0 auto;
  
  li:nth-of-type(1) {
    background: #00B9A7;
    color: #fff;
  }
  
  li:nth-of-type(2) {
    background: #00CEBA;
    color: #fff;
  }
  
  li:nth-of-type(3) {
    background: #1BE2CF;
    color: #fff;
  }
}

li {
  list-style: none;
  max-width: 350px;
  text-align: center;
  background: #00B9A7;
  margin: 0 auto 5px;
  border-radius: 5px;
}

.as-sortable-placeholder {
  background: transparent;
}

.as-sortable-item-handle {
    padding: 30px 5px;
}

ul.as-sortable-dragging {
  padding: 0;
 width: 400px !important;
   li {
     max-width: 400px;
     //fix offset
     margin-left: -20px;
     background: lighten(#00B9A7, 5%);
     color: #fff;
     
      div {
        padding: 45px 25px;
      }
  }
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="http://a5hik.github.io/ng-sortable/dist/ng-sortable.js"></script>

var app = angular.module('angularApp', ['ui.sortable']);

app.controller('MainCtrl', function($scope) {

  $scope.items = [{
    name: 'George Washington University'
  }, {
    name: 'Boston University'
  }, {
    name: 'New York University'
  }]

  $scope.sortableOptions = {
    
    orderChanged: function(event) {
      var audio = document.getElementById("clickSound2");
      audio.play();
    },
    dragStart: function (event) {
      var audio2 = document.getElementById("clickSound");
      audio2.play();
    },
    containment: '#sortable-container',
    containerPositioning: 'relative'
  };
  
  
  
  
  
});

<div ng-app="angularApp">
  <div ng-controller="MainCtrl" id="sortable-container">
    <h1>Sortable List</h1>
    <ul as-sortable="sortableOptions" ng-model="items">
      <li ng-repeat="item in items" as-sortable-item class="as-sortable-item">
        <div as-sortable-item-handle class="as-sortable-item-handle">
          <span data-ng-bind="item.name"></span>
        </div>
      </li>
    </ul>

    <!-- Audio SRC -->
    <audio id="clickSound">
      <source src="http://mihailo.centarzatalente.com/sounds/click.mp3"></source>
      <source src="http://mihailo.centarzatalente.com/sounds/click.ogg"></source>
      Audio not supported.
    </audio>

    <audio id="clickSound2">
      <source src="http://mihailo.centarzatalente.com/sounds/clickUp.mp3"></source>
      <source src="http://mihailo.centarzatalente.com/sounds/clickUp.ogg"></source>
      Audio not supported.
    </audio>
  </div>
</div>