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 arra

Solution 1:

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'
        })
    }
});

Solution 2:

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']);