2

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

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

如何从list1(which has ['one','two','three','four','five','six']) 拖入list2(which has ['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 每个都是一个单独的可排序列表，但我可以将项目从一个移动到另一个。

用例？Chris 的 minitrello 是一个不错的，虽然我是在将人们分组之后。我将展示 3 个列表：未分配、groupA、groupB。用户可以将未分配的人拖到组A或组B中，或者在组之间移动他们等。

4

2 回答 2

4

您可以使用 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'
    };

});

于 2013-09-24T07:45:51.823 回答
1

我想到了。我错过了connectWith可传递给 ui-sortable 的选项。

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

于 2013-09-24T07:45:09.257 回答