Angular UI Sortable not working properly

Question

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)

check this for a "fiddle": plnkr.co/edit/nAMngvPX4vZWP0dqFZND?p=preview no changes made though, not sure what's wrong yet. — Chris Preston
– Chris Preston, Commented Jul 8, 2014 at 6:23
@ChrisPreston Try re arranging "six" element multiple times you can see that it breaks — Trialcoder
– Trialcoder, Commented Jul 8, 2014 at 6:42

Jason Goemaat · Accepted Answer · 2014-07-08 07:28:32Z

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

Nidhish Krishnan · Accepted Answer · 2014-07-08 07:04:08Z

1

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

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>

script

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

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

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

edited Jul 8, 2014 at 7:04

answered Jul 8, 2014 at 6:37

Nidhish Krishnan

20.8k6 gold badges67 silver badges78 bronze badges

5 Comments

Trialcoder Over a year ago

I tried yours fiddle too but it breaks jsbin.com/figisage/1 & screenshot - awesomescreenshot.com/02233yzle4

Nidhish Krishnan Over a year ago

its working fine within jsbin, then how come..... here break means what, is it means when you applied that in your application, is the screen short given is part of that

Trialcoder Over a year ago

No its from your jsBin..just try drag drop "six" element up, down etc and you will see in your demo too that few items either duplicated or removed.

Trialcoder Over a year ago

yeah its working but I guess you replaced the library..I am looking for this library because I am using the same at multiple places :)

Trialcoder Over a year ago

Yeah sure..was still searching to make it working with my current version

Collectives™ on Stack Overflow

Angular UI Sortable not working properly

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related