jquery-ui - 如何在 Angular 中从一种 ui-sortable 迁移到另一种 ui-sortable？

Question

有人在http://jsfiddle.net/hKYWr/上整理了一个很好的 fiddle 。关于使用 angular-ui 和 jqueryui sortable 来获得良好的可排序效果。

如何在两个可排序列表之间移动项目？我更新了 jsfiddle 以显示示例 http://jsfiddle.net/hKYWr/893/

如何从 list1(其中包含 ['one','two','third','four',' Five','six'] 中拖动) 进入 list2 (其中有 ['A','B','C','D','E','F'])？例如，我想将 'one' 拖到 list2 中，从而得到 ['one','A','B','C','D','E', 'F'] 并将 list1 保留为 ['two','third','four',' Five','six']

Chris Ramon 的 http://minitrello.meteor.com 就是一个活生生的例子(但没有使用 Angular) 每个都是一个单独的可排序列表，但我可以将项目从一个列表移动到另一个列表。

用例？克里斯的 minitrello 是一个不错的，尽管我是在将人们分组之后。我将呈现 3 个列表:未分配、A 组、B 组。用户可以将未分配的人员拖动到组 A 或组 B，或在组之间移动，等等。

Answer 1

您可以使用 ui-sortable 指令连接两个需要使用“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>

Controller 代码:

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'
    };

});