CODEWITHSUNDEEP
javascriptangularjsdrag-and-drop
Michal Takáč
Michal Takáč

Reputation: 1055

ngDraggable not able to drop the grid to its place

I'm trying to implement drag and drop to my app and found a problem. I'm using ngDraggable module from https://github.com/fatlinesofcode/ngDraggable. I'm able to drag div and move it throught the screen but not able to drop it. If I drop it, it will fly back to the place where it has been insted of moving on the place. I'm trying to do same thing like in reorder example.

Here is my code:

JS:

$scope.draggableObjects = [
            {name: 'one'},
            {name: 'two'},
            {name: 'three'},
            {name: 'four'},
            {name: 'five'},
            {name: 'six'}
        ];


$scope.onDragComplete=function(data,evt){
    console.log("drag success, data:", data);
};
$scope.onDropComplete = function (index, obj, evt) {
    var otherObj = $scope.grids[index];
    var otherIndex = $scope.grids.indexOf(obj);
    $scope.grids[index] = obj;
    $scope.grids[otherIndex] = otherObj;
}

HTML:

<div ng-repeat="grid in draggableObjects" ng-drop="true" ng-drop-success="onDropComplete($index, $data,$event)" class="grids ng-scope">
        <div class="grid grid-normal ng-scope" ng-drag="true" ng-drag-data="grid" ng-class="grid.name" class="ng-binding one">Add a new chart</div>
    </div>

So I have list of objects, and callback functions, but its not working. Also, I've noticed that my code vs example does not add dragging and drag-over classes, don't know why, maybe this cause the problem.

Upvotes: 1

Views: 1487

Answers (2)

Narendra Dharajiya
Narendra Dharajiya

Reputation: 11

You need to provide 2 divs: 1. drag from 2. drag to

In drag to div make ng-drag="true" You can also use function provided in it.

For first div you need to give ng-drag="true" ng-drag-data="e" here "e" is the element from some data source.

Upvotes: 1

Michal Tak&#225;č
Michal Tak&#225;č

Reputation: 1055

Ok, I've been able to find an answer. Fix was in HTML:

<div ng-repeat="grid in draggableObjects" class="grids">
    <div class="grid grid-normal" ng-drag="true" ng-drag-data="grid" draggable="true" ng-class="grid.name" ng-drop="true" ng-drop-success="onDropComplete($index, $data,$event)">{{grid.name}}</div>
</div>

instead of 

<div ng-repeat="grid in draggableObjects" ng-drop="true" ng-drop-success="onDropComplete($index, $data,$event)" class="grids ng-scope">
    <div class="grid grid-normal ng-scope" ng-drag="true" ng-drag-data="grid" ng-class="grid.name" class="ng-binding one">Add a new chart</div>
</div>

Upvotes: 0

Related Questions