Question

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

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（document，['myapp']）;

任何帮助将不胜感激。

Answer 1

好吧，当涉及到角度时，所有道路都会导致数据“单一的真相来源”。因此，在移动之前将模型更新回原始状态，并且您已完成设置：）

下面的示例有两个列表，第一个列表受限制它的排序（更新方法）和发送项目（列表2上的接收方法）

您可以排序的第二个列表，并将项目发送到列表1 （使用foundation4 for css）

<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来区分发送者..

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

1 个答案: