如何從一個可排序的角度移動到Angular的另一個？

有人在http://jsfiddle.net/hKYWr/關於使用angular-ui與jqueryui排序以獲得良好的排序效果很好的小提琴。如何從一個可排序的角度移動到Angular的另一個？

如何在兩個可排序列表之間移動項目？我更新了的jsfiddle顯示一個例子http://jsfiddle.net/hKYWr/893/

如何從list1拖（其中有['one','two','three','four','five','six']）爲list2（其中有['A','B','C','D','E','F']）？例如，我想拖「一」爲list2，從而獲得['one','A','B','C','D','E','F']離開list1作爲['two','three','four','five','six']

一個活生生的例子（但不使用角）是克里斯·拉蒙的http://minitrello.meteor.com 每一個都是獨立的排序名單，但我可以移動項目從一個到另一個。

用例？ Chris'minitrello是一個不錯的選擇，儘管我是在將人們分組後才做出來的。我將提供3個列表：未分配，groupA，groupB。用戶可以將一個人從未分配的人拖到groupA或groupB中，或在組之間移動他們等。

來源

2013-09-24 deitch

您可以使用UI可排序指令來連接兩個列表中，您需要使用「connectWith」屬性：

Working Demo

<div ng:controller="controller"> 
    <ul ui:sortable="sortableOptions" ng:model="list" class="group"> 
     <li ng:repeat="item in list" class="item">{{item}}</li> 
    </ul> 
    <br /> 
    <ul ui:sortable="sortableOptions" ng:model="list2" class="group"> 
     <li ng:repeat="item in list2" class="item">{{item}}</li> 
    </ul> 
    <hr /> 
    <div ng:repeat="item in list">{{item}}</div> 
    <div ng:repeat="item in list2">{{item}}</div> 
</div>

控制器代碼：

myapp.controller('controller', function ($scope) { 
    $scope.list = ["1", "2", "3", "4", "5", "6"]; 

    $scope.list2 = ["7", "8", "9"]; 

    $scope.sortableOptions = { 
     update: function(e, ui) { 
        }, 
     receive: function(e, ui) { 

     }, 
     connectWith: ".group", 
     axis: 'y' 
    };

}）;

來源

2013-09-24 07:45:51

我已經知道了，但你的答案是正確的，我會給它信用。 – deitch

你是否也知道把這個祕密拖到一個空的列表中？我無法接受或擁有佔位符。問題在這裏http://stackoverflow.com/questions/18976018/how-do-i-drag-to-an-empty-connected-list-using-angular-ui – deitch

我已經在你的新帖子中回覆了你的答案，檢查它 –

我想通了。我錯過了connectWith選項通過可排序。

這裏是更新的jsfiddle，就像一個魅力：http://jsfiddle.net/hKYWr/894/

來源

2013-09-24 07:45:09 deitch

我回顧了你的jsfiddle，有時我遇到了模型視圖同步的問題：https://www.dropbox.com/s/9067ez06lobatlt/1.png你知道問題是什麼嗎？ – Mikhail

如何從一個可排序的角度移動到Angular的另一個？

回答

相關問題