Question

我正在开发Angular UI，使我的菜单可以排序，有时代码可以正常工作，有时它会像重新排列条目一样复制条目或填充空白菜单。

以下是完整代码 -

<!doctype html>
<html lang="en" ng-app="myapp">
<head>
    <title>Angular Sortable Demo</title>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
    <script>
        var myapp = angular.module('myapp', ['ui']);

        myapp.controller('controller', function ($scope) {
            $scope.list = ["one", "two", "three", "four", "five", "six"];
        });

        //angular.bootstrap(document, ['myapp']);   
    </script>
</head>
<body>
<div ng:controller="controller">
    <ul ui:sortable ng:model="list">
        <li ng:repeat="item in list" class="item">{{item}}</li>
    </ul>
    <hr />
    <div ng:repeat="item in list">{{item}}</div>
</div>
</body>
</html>
<style>
    .item, .placeholder {
    padding: 2px;
    width: 50px;
    height: 20px;
    border: 1px solid #333;
    background: #EEE;
}

.placeholder {
    background: #AEF;
}

</style>

此外，如果有人可以在JSFiddle创建此内容时帮助我，因为我尝试了这个但无法将其设置为小提琴 - Fiddle Link

修改 -

这有时会变成Screenshot（菜单项重复）

Answer 1

我写了自己的指令（plnkr）：

<ol dnd-list="wrap.names">
    <li ng-repeat="name in wrap.names">{{name}} is {{$index}}</li>
</ol>


// directive for a single list
app.directive('dndList', function() {
     return function(scope, element, attrs) {

        // variables used for dnd
        var toUpdate;
        var startIndex = -1;

        // watch the model, so we always know what element
        // is at a specific position
        scope.$watch(attrs.dndList, function(value) {
            toUpdate = value;
        },true);

        // use jquery to make the element sortable (dnd). This is called
        // when the element is rendered
        $(element[0]).sortable({
            items:'li',
            start:function (event, ui) {
                // on start we define where the item is dragged from
                startIndex = ($(ui.item).index());
            },
            stop:function (event, ui) {
                // on stop we determine the new index of the
                // item and store it there
                var newIndex = ($(ui.item).index());
                var toMove = toUpdate[startIndex];
                toUpdate.splice(startIndex,1);
                toUpdate.splice(newIndex,0,toMove);

                // we move items in the array, if we want
                // to trigger an update in angular use $apply()
                // since we're outside angulars lifecycle
                scope.$apply(scope.model);
            },
            axis:'y'
        })
    }
});

Answer 2

它的工作正常....看看这个

<强> Preview

<强> JSFiddle

enter image description here

<强> HTML

<div ng:controller="controller">
    <ul ui:sortable ng:model="list">
        <li ng:repeat="item in list" class="item">{{item}}</li>
    </ul>
    <hr />
    <div ng:repeat="item in list">{{item}}</div>
</div>

<强>脚本

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

myapp.controller('controller', function ($scope) {
    $scope.list = ["one", "two", "three", "four", "five", "six"];
});

angular.bootstrap(document, ['myapp']);

Angular UI Sortable无法正常工作

2 个答案: