Question

有人可以告诉我为什么this plunk不允许我在两个列表之间移动项目吗？

我能够使用普通的RubaXa Sortable库和普通的Javascript来获取共享列表，但是我无法使用Angular和RubaXa / angular-legacy-sortablejs库。

我已阅读并重新阅读配置选项here上的文档，我发誓我正确地做到了。

我还审核了文档中的示例（由于低代表点而不允许在此处链接）但没有成功。

我创建了两个列表并使用相同的配置信息连接它们：

var ctrl = this;
ctrl.sortableConf = {
    group: {
        name: 'tags',
        pull: true,
        put: true
    },
    sort: true,
    animation: 150,
    draggable: '.list-group-item',
    filter: '.js-remove',
    chosenClass: ".sortable-chosen" 
};

它们在内部排序都很好，我只是不能将项目从一个拖到另一个，反之亦然。

Answer 1

The documentation错误，或者在不使用部分页面而不是嵌入式模板时我不知道如何正确引用它。

调试sortable.js中的选项加载代码后，我意识到它没有从group:加载ctrl.sortableConf块，而且我遇到了默认值：

在尝试了很多不同的方法之后，我偶然发现了this example并且能够从那里开始工作。

以下是plunk和代码的副本，以防万一消失：

    // create angular app
    var tagsApp = angular.module('tagsApp', ['ng-sortable']);

    tagsApp.controller('bugTagController', ['$scope', function($scope) {
      $scope.tags = [
        'Beans',
        'Potatoes'
      ];

      $scope.bugTagControllerConfig = {
        group: 'tags',
        pull: true,
        put: true,
        sort: true,
        animation: 150,
        draggable: '.list-group-item',
        filter: '.js-remove',
        chosenClass: ".sortable-chosen",
        accept: function(sourceItemHandleScope, destSortableScope) {
          console.log('masterTagController:accept');
          return true;
        },
        onStart: function(evt) {
          console.log('masterTagController:onStart');
        },
        onEnd: function(evt) {
          console.log('masterTagController:onEnd');
        },
        onAdd: function(evt) {
          console.log('masterTagController:onAdd');
        },
        onRemove: function(evt) {
          console.log('masterTagController:onAdd');
        },

        onFilter: function(evt) {
          var el = masterTags.closest(evt.item); // get dragged item
          el && el.parentNode.removeChild(el);
          console.log('masterTagController:onFilter');
        },
        onSort: function(evt) {
          console.log('masterTagController:onSort');
          var $item = $(evt.item);
          var id = $item.data('id');
          if (evt.action === 'add') {
            console.log('masterTagController:add');
            // put a check to make sure it's unique
            // check to see if this node has already been added  and prevent it it has
            var itemCount = evt.item.parentNode.children.length;

            for (var i = 0; i < itemCount; i++) {
              var $child = $(evt.item.parentNode.children[i]);
              var childId = $child.data('id');

              if (childId === id && i !== evt.newIndex) {
                console.log('masterTagController:rejectedNewItem');
                evt.preventDefault();
                return;
              }
            }

            if (evt.newIndex === itemCount - 1) {
              Sortable.utils.swap(evt.item.parentNode, evt.newIndex, evt.newIndex - 1);
            }
          }
        }

      };
    }]);

    tagsApp.controller('masterTagController', ['$scope', function($scope) {
      $scope.tags = [
        'Apples',
        'Oranges',
        'Comquats',
        'Bannanas',
        'Pineapples'
      ];

      $scope.masterTagControllerConfig = {
        group: 'tags',
        pull: true,
        put: true,
        sort: true,
        animation: 150,
        draggable: '.list-group-item',
        filter: '.js-remove',
        chosenClass: ".sortable-chosen",
        accept: function(sourceItemHandleScope, destSortableScope) {
          console.log('masterTagController:accept');
          return true
        },
        onStart: function(evt) {
          console.log('masterTagController:onStart');
        },
        onEnd: function(evt) {
          console.log('masterTagController:onEnd');
        },
        onAdd: function(evt) {
          console.log('masterTagController:onAdd');
        },
        onRemove: function(evt) {
          console.log('masterTagController:onAdd');
        },

        onFilter: function(evt) {
          var el = masterTags.closest(evt.item); // get dragged item
          el && el.parentNode.removeChild(el);
          console.log('masterTagController:onFilter');
        },
        onSort: function(evt) {
          console.log('masterTagController:onSort');
          var $item = $(evt.item);
          var id = $item.data('id');
          if (evt.action === 'add') {
            console.log('masterTagController:add');
            // put a check to make sure it's unique
            // check to see if this node has already been added  and prevent it it has
            var itemCount = evt.item.parentNode.children.length;

            for (var i = 0; i < itemCount; i++) {
              var $child = $(evt.item.parentNode.children[i]);
              var childId = $child.data('id');

              if (childId === id && i !== evt.newIndex) {
                console.log('masterTagController:rejectedNewItem');
                evt.preventDefault();
                return;
              }
            }

            if (evt.newIndex === itemCount - 1) {
              Sortable.utils.swap(evt.item.parentNode, evt.newIndex, evt.newIndex - 1);
            }
          }
        }

      };
    }]);

这是html：

    <!DOCTYPE html>
    <html>

    <head>
      <link rel="stylesheet" href="style.css">
    </head>

    <body>
      <div ng-app="tagsApp">
        <!-- Starting Secondary Tags -->
        <div class="col-md-2">
          <h2>Tags on this list</h2>
          <div class="well" ng-controller="bugTagController">
            <ul id="bugTags" class="list-group" ng-sortable="bugTagControllerConfig" ng-model="tags" style="well-lg">
              <li class="list-group-item" ng-repeat="tag in tags" ng-sortable-item style="well-lg">
                <div ng-sortable-item-handle>{{ tag }}</div>
              </li>
            </ul>
          </div>
        </div>
        <!-- Ending Secondary Tags -->

        <!-- Starting Master Tags -->
        <div class="col-md-2">
          <h2>Master Tag List</h2>
          <div class="well" ng-controller="masterTagController">
            <ul id="masterTags" class="list-group" ng-sortable="masterTagControllerConfig" ng-model="tags" style="well-lg">
              <li class="list-group-item" ng-repeat="tag in tags" ng-sortable-item style="well-lg">
                <div ng-sortable-item-handle>{{ tag }}</div>
              </li>
            </ul>
          </div>
          <!-- Ending Master Tags -->
        </div>
      </div>
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
      <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.js"></script>
      <script type="text/javascript" src="https://rubaxa.github.io/Sortable/Sortable.js"></script>
      <script type="text/javascript" src="ng-sortable.js"></script>
      <script src="script.js"></script>
    </body>

    </html>

无法通过RubaXa / angular-legacy-sortablejs在列表之间移动项目

1 个答案: