Question

有人在http://jsfiddle.net/hKYWr/汇总了一个关于使用angular-ui和jqueryui可排序的小问题，以获得良好的可排序效果。

如何在两个可排序列表之间移动项目？我更新了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']

一个实例（但不使用Angular）是Chris Ramon的http://minitrello.meteor.com 每个都是一个单独的可排序列表，但我可以将项目从一个移动到另一个。

用例？克里斯的minitrello是一个很好的，虽然我是在将人们分组后。我将提供3个列表：未分配，groupA，groupB。用户可以将人从未分配拖动到groupA或groupB，或者在组之间移动等等。

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>

控制器代码：

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

}）;

Answer 2

我明白了。我错过了connectWith选项可以通过ui-sortable。

这是更新的jsfiddle，就像一个魅力：http://jsfiddle.net/hKYWr/894/

如何在Angular中从一个ui-sortable移动到另一个？

2 个答案: