ng-sortable not working in plunker

559 Views Asked by At

I created an ng-sortable example in Plunker but it's not working.

Here's the JavaScript:

angular.module('sortableExample', [])
.controller('PresidentsCtrl', ['$scope', function($scope) {
  $scope.presidents = [
    'George Washington',
    'Abraham Lincoln',
    'William Jefferson Clinton'
  ];

  $scope.dragControlListeners = {
    accept: function(sourceItemHandleScope, destSortableScope) { return true },
    itemMoved: function(event) {},
    orderChanged: function(event) {}
  };
}]);

And the HTML:

<!DOCTYPE html>
<html ng-app="sortableExample">

  <head>
    <script data-require="[email protected]" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />

    <script src="https://raw.githubusercontent.com/a5hik/ng-sortable/master/dist/ng-sortable.js"></scr</script>
    <link rel="stylesheet" href="https://raw.githubusercontent.com/a5hik/ng-sortable/master/dist/ng-sortable.css">

    <script src="script.js"></script>
  </head>

  <body ng-controller="PresidentsCtrl">
    <ul data-as-sortable="dragControlListeners" data-ng-model="presidents">
      <li data-ng-repeat="president in presidents" data-as-sortable-item>
        <div data-as-sortable-item-handle>{{ president }}</div>
      </li>
    </ul>
  </body>

</html>

The right stuff shows up but it's not interactive like it should be. Any idea why?

1

There are 1 best solutions below

0
On BEST ANSWER

You should not include links to github source -) Since there is no cdn for ng-sortable - just copy it to plunker.

Also you forget to add dependency of ng-app.

angular.module('sortableExample', ['as.sortable'])

http://plnkr.co/edit/gRRzaVfwIycdzfApmebB?p=preview