Angular UI Sortable无法正常工作

Question

Angular UI Sortable无法正常工作

Tri*_*der 3 javascript jquery-ui angularjs angular-ui angularjs-ng-repeat

我正在使用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>

Run Code Online (Sandbox Code Playgroud)

此外,如果有人可以帮助我创建这个,JSFiddle因为我尝试了这个,但无法将其设置为小提琴 - 小提琴链接

编辑-

这就是它有时变得如何截图(菜单项重复)

Answer 1

Jas*_*aat 7

我写了自己的指令(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'
        })
    }
});

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，11 月前
查看次数：	5946 次
最近记录：	11 年，11 月前