AngularJS : drag-n-drop directive not working

Question

I am using the following library: https://github.com/marceljuenemann/angular-drag-and-drop-lists

I am trying to move(by dragging) an element from one list to another. disclaimer : i am a newbie so any help is appreciated and i might be doing some very naive mistake.

Here is my code:

var app = angular.module("app", ['dndLists']);

app.controller( 'myCtrl', function ( $scope, $http, $log ) {
    $scope.lists = {serversList:[], selectedServersList:[]}
    $scope.lists.serversList =
    {
        label : "servers",
        allowedTypes : [
            'server'
        ],
        servers : [
            {
                name : "server1",
                type : "server"
            }, {
                name : "server2",
                type : "server"
            }, {
                name : "server",
                type : "server"
            }
        ]
    };
    $scope.lists.selectedServersList =
    {
        label : "selectedServers",
        allowedTypes : [
            'server'
        ],
        servers : []
    };

    // Model to JSON for demo purpose
    $scope.$watch('lists', function(lists) {
        $scope.modelAsJson = angular.toJson(lists, true);
    }, true);
};

/**
* For the correct positioning of the placeholder element, the dnd-list and
* it's children must have position: relative
*/
.servers-container ul[dnd-list],
.servers-container ul[dnd-list] > li {
    position: relative;
}

/**
* The dnd-list should always have a min-height,
* otherwise you can't drop to it once it's empty
*/
.servers-container ul[dnd-list] {
    min-height: 42px;
    padding-left: 0px;
}

/**
* The dndDraggingSource class will be applied to
* the source element of a drag operation. It makes
* sense to hide it to give the user the feeling
* that he's actually moving it.
*/
.servers-container ul[dnd-list] .dndDraggingSource {
    display: none;
}

/**
* An element with .dndPlaceholder class will be
* added to the dnd-list while the user is dragging
* over it.
*/
.servers-container ul[dnd-list] .dndPlaceholder {
    display: block;
    background-color: #ddd;
    min-height: 42px;
}

/**
* The dnd-lists's child elements currently MUST have
* position: relative. Otherwise we can not determine
* whether the mouse pointer is in the upper or lower
* half of the element we are dragging over. In other
* browsers we can use event.offsetY for this.
*/
.servers-container ul[dnd-list] li {
    background-color: #fff;
    border: 1px solid #ddd;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;

    /* Disable text selection if item is not draggable */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/**
* Gender-specifc background
*/
.servers-container ul[dnd-list] li.background-man {
    background-color: #CAE0FC;
}

.servers-container ul[dnd-list] li.background-woman {
    background-color: #FFE2F5;
}

.servers-container ul[dnd-list] input.background-man {
    background-color: #D8E9FF;
    color: #2F4D99;
}

.servers-container ul[dnd-list] input.background-woman {
    background-color: #FFF0FA;
    color: #D84FA7;
}

/**
* Handle positioning
*/
.servers-container .handle {
    cursor: move;
    position: absolute;
    top: 14px;
}

.servers-container .name {
    margin-left: 20px;
}

<div ng-app='app'>
    <div class="row" ng-controller='myCtrl'>
        <div class="servers-container col-md-4">
            <ul dnd-list="lists.serversList"
                dnd-allowed-types="lists.serversList.allowedTypes">
                <li ng-repeat="server in lists.serversList.servers"
                    dnd-draggable="server"
                    dnd-type="server.type"
                    dnd-disable-if="server.type == 'unknown'"
                    dnd-moved="lists.serversList.servers.splice($index, 1)"
                    dnd-effect-allowed="move"
                    class="background-servers">
                    <div class="handle">:::</div>
                    <div class="name" dnd-nodrag>
                        <input type="text" ng-model="server.name" class="background-server form-control input-sm">
                    </div>
                </li>
                <li class="dndPlaceholder">Drop any <strong>server</strong> here</li>
            </ul>
        </div>

        <div class="servers-container col-md-4">
            <ul dnd-list="lists.selectedServersList"
                dnd-allowed-types="lists.selectedServersList.allowedTypes">
                <li ng-repeat="server in lists.selectedServersList.servers"
                    dnd-draggable="server"
                    dnd-type="server.type"
                    dnd-disable-if="server.type == 'unknown'"
                    dnd-moved="lists.selectedServersList.servers.splice($index, 1)"
                    dnd-effect-allowed="move"
                    class="background-servers">
                    <div class="handle">:::</div>
                    <div class="name" dnd-nodrag>
                        <input type="text" ng-model="server.name" class="background-server form-control input-sm">
                    </div>
                </li>
                <li class="dndPlaceholder">Drop any <strong>server</strong> here</li>
            </ul>
        </div>
    </div>
</div>

i am able to drag an element from one div to another but the element vanishes from first div after the drop but doesn't appear in the second div....its not getting added to the another list. — Sachin Sharma
– Sachin Sharma, Commented Nov 1, 2015 at 17:09

user3280132 · Accepted Answer · 2015-11-28 04:08:22Z

1

I ran your code in my debug console and saw that the call on splice is is not defined. Upon further inspection I see that your <ul dnd-list> element is actually based on your serversList object, rather than an actual list of things you would iterate through. I did something very similar when I was setting this dnd list up.

The serversList.servers array is actually going to be the base of your UL and then your li are going to be the entries within that array. That way the splice function will actually have something to that it can be used on.

That should get you started. I'm off to developer laser tag in a second so I don't have time to implement it tonight ;).

I've been really happy with this plugin so far, have fun!

edited Nov 28, 2015 at 4:08

answered Nov 28, 2015 at 4:02

user3280132

112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS : drag-n-drop directive not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related