sortable

ng-sortable

by Osama Qassar

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="https://a5hik.github.io/ng-sortable/dist/ng-sortable.js"></script>
<div ng-app="example">
  <div class="grid">
    <div class="column" ng-controller="MainCtrl">
      <div class="row">
          <div as-sortable="sortableOptions" ng-model="items">
            <div ng-repeat="item in items" as-sortable-item class="as-sortable-item">
              <div as-sortable-item-handle class="itm">
                <span>{{item.name}}</span>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>
</div>





<script>
  'use strict'

  var app = angular.module('example', ['as.sortable']);

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

    $scope.items = [{
      name: 'Element 1'
    }, {
      name: 'Element 2'
    }, {
      name: 'Element 3'
    }, {
      name: 'Element 4'
    }, {
      name: 'Element 5'
    }, {
      name: 'Element 6'
    }, {
      name: 'Element 7'
    }, {
      name: 'Element 8'
    }];
  });

</script>

CSS

.itm{
  padding:3px; 
  margin:3px;
  border:1px solid #ccc;
}
.itm:hover{
  cursor:pointer;
}

JavaScript

'use strict'

  var app = angular.module('example', ['as.sortable']);

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

    $scope.items = [{
      name: 'Element 1'
    }, {
      name: 'Element 2'
    }, {
      name: 'Element 3'
    }, {
      name: 'Element 4'
    }, {
      name: 'Element 5'
    }, {
      name: 'Element 6'
    }, {
      name: 'Element 7'
    }, {
      name: 'Element 8'
    }];
  });