無法讓RubaXa/angular-legacy-sortablejs在列表間移動項目

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調試選項加載代碼後，我意識到，這是不是從ctrl.sortableConf加載group:塊，我被卡住使用默認值：

嘗試後許多不同的方式來做到這一點，我偶然發現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>