我如何从一个UI可排序移动到另一个在角？ [英] How do I move from one ui-sortable to another in Angular?

问题描述

有人把一个很好的小提琴在 http://jsfiddle.net/hKYWr/ 有关使用angular- UI与jQueryUI的排序，以获得良好的效果排序

Someone put together a good fiddle at http://jsfiddle.net/hKYWr/ about using angular-ui with jqueryui sortable to get a good sortable effect.

你如何提出两项排序列表之间的项目？我更新了的jsfiddle展现一个例子 http://jsfiddle.net/hKYWr/893/

How do you move items between two sortable lists? I updated the jsfiddle to show an example http://jsfiddle.net/hKYWr/893/

我如何从 list1的拖（其中有 [一，二，三化，四，十二五'，'六'] ）到列表2 （其中有 ['A'，'B'，'C' ，'D'，'E'，'F'] ）？例如，我想拖一到列表2 并由此获得 ['一'，'A'，'B'，'C' ，'D'，'E'，'F'] 离开 list1的为 [两节，三'，'四'，'五'，'六']

How do I drag from list1 (which has ['one','two','three','four','five','six']) into list2 (which has ['A','B','C','D','E','F'])? For example, I want to drag 'one' into list2 and thus get ['one','A','B','C','D','E','F'] and leave list1 as ['two','three','four','five','six']

有一个活生生的例子（但不使用角）是克里斯·拉蒙的 http://minitrello.meteor.com
它们都是独立的排序列表，但我可以从一个项目移动到其他。

A live example (but not using Angular) is Chris Ramon's http://minitrello.meteor.com Each is a separate sortable list, but I can move items from one to the other.

使用情况？克里斯minitrello是一个很好的，虽然我整理人以群后。我将present 3列出：未分配，A组，B组。用户可以从取消分配拖动一个人变成A组，B组或，或组之间移动它们，等等。

Use case? Chris' minitrello is a good one, although I am after sorting people into groups. I will present 3 lists: unassigned, groupA, groupB. The user can drag a person from unassigned into groupA, or groupB, or move them between groups, etc.

推荐答案

您可以使用UI可排序指令来连接两个列表，你需要使用connectWith属性：

You can use ui-sortable directive to connect two list you need to use "connectWith" property:

<大骨节病>
工作演示

<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>

控制器code：

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

}）;

这篇关于我如何从一个UI可排序移动到另一个在角？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！