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">
    <ling-repeat="name in wrap.names">{{name}} is {{$index}}</li>
</ol>


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

        // variables used for dndvar 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 therevar 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

<divng:controller="controller"><ului:sortableng:model="list"><ling:repeat="item in list"class="item">{{item}}</li></ul><hr /><divng: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']);