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" class="container-fluid" 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="as-sortable-item-handle" style="height:50px">
                <span data-ng-bind="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'
    }];

    $scope.$watch('items', function() {
      console.log(arguments);
    });

    $scope.sortableOptions = {
      containment: '#sortable-container'
    };
  });

</script>