angularjs - 使用 Angular-ui 的可排序模块时如何取消不同列表之间的拖动

Question

我正在使用 angular-ui 的 sortable-ui 模块，并尝试提出取消，以便拖动的项目返回到源列表中的原始位置。不幸的是我无法让这个工作。这是一个例子:

http://jsfiddle.net/Ej99f/1/

var myapp = angular.module('myapp', ['ui.sortable']);

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

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

$scope.sortableOptions = {
    update: function(e, ui) {
        if (Number(ui.item.text()) === 6) {
            ui.item.parent().sortable('cancel');
        }
    },
    receive: function(e, ui) {            
        ui.sender.sortable('cancel');
        ui.item.parent().sortable('cancel'); 
    },
    connectWith: ".group",
    axis: 'y'
};

});

angular.bootstrap(文档, ['myapp']);

如有任何帮助，我们将不胜感激。

Answer 1

好吧，当谈到 Angular 时，所有道路都通向数据“单一事实来源”。因此，将您的模型更新回移动之前的原始状态，然后就一切就绪了:)

下面的示例有两个列表，第一个列表被限制为 它的排序(更新方法) 以及发送项目(列表 2 中的接收方法)

您可以排序的第二个列表，并将项目发送到列表 1 (CSS使用foundation4)

<div ng-app="test">        
    <div ng-controller="sortableTest">
    <div class="small-4 columns panel">
        <ul data-drop="true"
            ui-sortable="sortable.options.list1" ng-model="sortable.model.list1">
            <li ng-repeat="fruit in sortable.model.list1"
                data-id="{{ fruit.id }}">{{ fruit.label }}</li>
        </ul>
    </div>

    <div class="small-4 columns panel">
        <ul data-drop="true"
            ui-sortable="sortable.options.list2" ng-model="sortable.model.list2">
            <li ng-repeat="element in sortable.model.list2"
                data-id="{{ element.id }}">{{ element.label }}</li>
        </ul>
    </div>
<div class="clear"></div>
    <br />
    <span ng-repeat="fruit in sortable.model.list1">{{ fruit.label }} </span><br />
    <span ng-repeat="element in sortable.model.list2">{{ element.label }} </span><br />
    <span ng-repeat="fruit in sortable.oldData.list1">{{ fruit.label }} </span><br />
    <span ng-repeat="element in sortable.oldData.list2">{{ element.label }} </span><br />
</div>
</div>

js:

var test = angular.module('test', ['ui.sortable']);

test.controller('sortableTest', function($scope, $timeout) {

    $scope.sortable = {
        model: {
            list1: [{id: 1, label: 'apple'},{id: 2, label: 'orange'},{id: 3, label: 'pear'},{id: 4, label: 'banana'}],
            list2: [{id: 5, label: 'earth'},{id: 6, label: 'wind'},{id: 7, label: 'fire'},{id: 8, label: 'water'}]
        },
        oldData: {
            list1: [],
            list2: []
        },
        options: {
            list1: {
                update: function(event, ui) {
                    console.debug('up-list1');
                    $scope.sortable.oldData.list1 = $scope.sortable.model.list1.slice(0);
                    $scope.sortable.oldData.list2 = $scope.sortable.model.list2.slice(0);
                    // DO NOT USE THIS! it messes up the data. 
                    // ui.item.parent().sortable('cancel');  // <--- BUGGY!
                    // uncomment and check the span repeats..

                    $timeout(function(){
                        $scope.sortable.model.list1 = $scope.sortable.oldData.list1;
                        $scope.sortable.model.list2 = $scope.sortable.oldData.list2;
                    });
                },
                connectWith: 'ul'
            },
            list2: {
                update: function(event, ui) {
                    console.debug('up-list2');

                },
                connectWith: 'ul',
                receive: function(event, ui) {
                    console.debug('re-list2');

                    $timeout(function(){
                        $scope.sortable.model.list1 = $scope.sortable.oldData.list1;
                        $scope.sortable.model.list2 = $scope.sortable.oldData.list2;
                    });
                }
            }
        }
    };
});

您当然可以使用服务或其他东西来存储旧值。如果您有两个以上的话，可以使用 ui.sender 来区分发件人..