Angular UI Sortable not working properly

问题

I am working on Angular UI for making my menus sortable, sometimes the code works and sometimes its breaks like duplicating the entries or filling the blank menus when I am re arranging items.

Following is the full code -

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

Also If someone could help me while creating this in JSFiddle as I tried this but unable to set it as a fiddle - Fiddle Link

EDIT-

This is how it becomes at times Screenshot (Menu Items duplicated)

回答1:

Its Working Fine.... Take a look at this

Preview

JSFiddle

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>

script

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

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

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

回答2:

I wrote my own directive (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'
        })
    }
});

来源：https://stackoverflow.com/questions/24624807/angular-ui-sortable-not-working-properly

标签

javascript

angularjs

jquery-ui

angularjs-ng-repeat

angular-ui