ng-sortable不适用于plunker

时间:2016-06-10 15:18:29

标签: angularjs ng-sortable

我创建了an ng-sortable example in Plunker,但它无效。

这是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) {}
  };
}]);

HTML:

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

  <head>
    <script data-require="angular.js@1.5.6" 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>

正确的东西出现了,但它不是应该的互动。知道为什么吗?

1 个答案:

答案 0 :(得分:1)

您不应包含指向github源的链接 - ) 由于ng-sortable没有cdn - 只需将其复制到plunker。

此外,您忘记添加ng-app的依赖项。

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

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