Div move after click on another div using angular js

Question

I implement a DRAG and DROP Angularjs for my project to move a DIV from one location to another location in order to let the user able to categorize the items. I just need to fulfill my simple requirement namely:

Step 1: User click at division (1) 
Step 2: User click at division (2)

Process will be taken: Once user at STEP(2), the Goose will move to STEP (2). If user click once again Goose in STEP(2) then it will go back to STEP(1).

How I can do that?

As you can see my expected output:

enter image description here

My current codes so far:

var myApp = angular.module('MyApp',['ngDraggable']).controller('MyCtrl',function($scope){
  
    $scope.centerAnchor = true;
    $scope.toggleCenterAnchor = function () {
        $scope.centerAnchor = !$scope.centerAnchor
    };

    var onDraggableEvent = function (evt, data) {
        console.log("128", "onDraggableEvent", evt, data);
    };
    $scope.$on('draggable:start', onDraggableEvent);
    $scope.$on('draggable:end', onDraggableEvent);
    $scope.droppedObjects0 = [{name:'Goose'},{name:'Rabbit'},{name:'Chick'},{name:'Cat'}];
    $scope.droppedObjects1 = []; //Answer: Cat + Rabbit
    $scope.droppedObjects2 = []; //Answer: Chicken + Goose
    
    
    $scope.AnswerOject1 = [{name:'Arnab'},{name:'Kucing'}];
    $scope.AnswerOject2 = [{name:'Angsa'},{name:'Ayam'}];
    
    $scope.onDropComplete0 = function (data, evt) {
        console.log("127", "$scope", "onDropComplete0", data, evt);
        var index = $scope.droppedObjects0.indexOf(data);
        if (index == -1)
            $scope.droppedObjects0.push(data);
    };
    $scope.onDropComplete1 = function (data, evt) {
        console.log("127", "$scope", "onDropComplete1", data, evt);
        var index = $scope.droppedObjects1.indexOf(data);
        if (index == -1)
            $scope.droppedObjects1.push(data);
    };
    $scope.onDragSuccess0 = function (data, evt) {
        console.log("133", "$scope", "onDragSuccess0", "", evt);
        var index = $scope.droppedObjects0.indexOf(data);
        if (index > -1) {
            $scope.droppedObjects0.splice(index, 1);
        }
    };
    $scope.onDragSuccess1 = function (data, evt) {
        console.log("133", "$scope", "onDragSuccess1", "", evt);
        var index = $scope.droppedObjects1.indexOf(data);
        if (index > -1) {
            $scope.droppedObjects1.splice(index, 1);
        }
    };
    $scope.onDragSuccess2 = function (data, evt) {
        var index = $scope.droppedObjects2.indexOf(data);
        if (index > -1) {
            $scope.droppedObjects2.splice(index, 1);
        }
    };
    $scope.onDropComplete2 = function (data, evt) {
        var index = $scope.droppedObjects2.indexOf(data);
        if (index == -1) {
            $scope.droppedObjects2.push(data);
        }
    };
    var inArray = function (array, obj) {
        var index = array.indexOf(obj);
    };
});

.body
{
    width:500px;
    margin-left:auto; 
    margin-right:auto;
}

[ng-drag] {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

[ng-drag] {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.5);
    color: #131313;
    text-align: center;
    padding-top: 12px;
    display: inline-block;
    margin: 5px 5px;
    cursor: move;
    border: 1px solid #ccc;
    border-radius: 4px;
}

ul.draggable-objects:after {
    display: block;
    content: "";
    clear: both;
}

.draggable-objects li {
    float: left;
    display: block;
    width: 50px;
    height: 50px;
    margin:2px;
}

[ng-drag].drag-over {
    border: solid 1px red;
}

[ng-drag].dragging {
    opacity: 0.5;
}

[ng-drop] {
    background: rgba(198, 255, 198, 0.5);
    text-align: center;
    height: 150px;
    padding-top: 10px;
    display: block;
    margin: 20px auto;
    position: relative;
    border: 1px solid #c3c3c3;
    border-radius: 8px;
}

[ng-drop].drag-enter {
    border: solid 5px red;
}

[ng-drop] span.title {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 20px;
    margin-left: -100px;
    margin-top: -10px;
}

[ng-drop] div {
    position: relative;
    z-index: 2;
}
.list-of-drag-item
{
    height: 83px;
    background-color: #f7f7f7;
}

<link href="http://code.ionicframework.com/1.3.1/css/ionic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngDraggable/0.1.10/ngDraggable.js"></script>

<div ng-app="MyApp" ng-controller="MyCtrl" class="body">
Categorize the animals based on their reproductive system
<div class="row">
    <div class="col">
        <div class="list-of-drag-item" ng-drop="true" ng-drop-success="onDropComplete0($data,$event)">
            <div ng-click="clickMe()"  ng-repeat="obj in droppedObjects0" ng-drag="true" ng-drag-data="obj"
                ng-drag-success="onDragSuccess0($data,$event)" ng-center-anchor="{{centerAnchor}}">
               {{obj.name}}
            </div>
        </div>
    </div>
</div>
<div class="row" style="text-align: center;">
    <div class="col div-left">
        <span class="title">Animals that give birth
        <div ng-drop="true" ng-drop-success="onDropComplete1($data,$event)">
            <div ng-repeat="obj in droppedObjects1" ng-drag="true" ng-drag-data="obj"
                 ng-drag-success="onDragSuccess1($data,$event)" ng-center-anchor="{{centerAnchor}}">
                {{obj.name}}
            </div>
        </div>
    </div>
    <div class="col div-right">
        <span class="title">Animals that Laying Eggs</span>
        <div ng-drop="true" ng-drop-success="onDropComplete2($data,$event)">
            <div ng-repeat="obj in droppedObjects2" ng-drag="true" ng-drag-data="obj"
                 ng-drag-success="onDragSuccess2($data,$event)" ng-center-anchor="{{centerAnchor}}">
                {{obj.name}}
            </div>
        </div>
    </div>
</div>
  </div>

Stefan Negele · Accepted Answer

I changed your code to achieve this. First, you haven´t checked if there is an object on your drop event handlers and the drop event is fired if you just click on an element. Must be a bug in the drag&drop library. Then i added click handlers on the elements for saving the given reference in $scope.activeElement and their containers reference in containerOfActiveElement. Also there are click handlers on the containers for adding and removing the active element from the container arrays.

There is also some code in the template and css for setting a red background on the active element. It also adds a transition which, in combination with angulars $timeout, makes the animation happen.

You have a lot of duplicated code. You could improve that with passing the array references like i did.

var myApp = angular.module('MyApp', ['ngDraggable']).controller('MyCtrl',function($scope, $timeout){

$scope.activeElement;
var containerOfActiveElement;
var activeHTMLElement;
var getCenterOfELement = function (htmlElement) {
  var rect = htmlElement.getBoundingClientRect(); 
  return {
    x: rect.left + rect.width / 2,
    y: rect.top + rect.height / 2
  }
};
$scope.onElementClick = function(event, data, container) {
  if (!angular.equals(data, $scope.activeElement)) {
    event.stopPropagation(); // you need this for not firing event on container
    $scope.activeElement = data;
    containerOfActiveElement = container;
    activeHTMLElement = event.target;
  } else 
    $scope.activeElement = null;
};
$scope.onTargetClick = function(container, event) {
  if ($scope.activeElement) {
    var activeCenter = getCenterOfELement(activeHTMLElement);
    var targetCenter = getCenterOfELement(event.target);
    var offsetX = targetCenter.x - activeCenter.x;
    var offsetY = targetCenter.y - activeCenter.y;
    activeHTMLElement.style.transform= 'translate('+offsetX+'px,'+offsetY+'px)';
    $timeout(function() {
        container.push($scope.activeElement);
        var index = containerOfActiveElement.indexOf($scope.activeElement);
        containerOfActiveElement.splice(index, 1);
        $scope.activeElement = null;
        containerOfActiveElement = null; 
        activeHTMLElement = null;
    }, 200);
  }
};
  
$scope.centerAnchor = true;
$scope.toggleCenterAnchor = function () {
    $scope.centerAnchor = !$scope.centerAnchor
};

/* can be removed, since it has no effect:
var onDraggableEvent = function (evt, data) {
    console.log("128", "onDraggableEvent", evt, data);
};
$scope.$on('draggable:start', onDraggableEvent);
$scope.$on('draggable:end', onDraggableEvent);
*/
  
$scope.droppedObjects0 = [{name:'Goose'},{name:'Rabbit'},{name:'Chick'},{name:'Cat'}];
$scope.droppedObjects1 = []; //Answer: Cat + Rabbit
$scope.droppedObjects2 = []; //Answer: Chicken + Goose


$scope.AnswerOject1 = [{name:'Arnab'},{name:'Kucing'}];
$scope.AnswerOject2 = [{name:'Angsa'},{name:'Ayam'}];

$scope.onDropComplete0 = function (data, evt) {
    console.log("127", "$scope", "onDropComplete0", data, evt);
    var index = $scope.droppedObjects0.indexOf(data);
    if (index == -1 && data !== null) // gave unwanted result if data was null (new empty object)
        $scope.droppedObjects0.push(data);
};
$scope.onDropComplete1 = function (data, evt) {
    console.log("127", "$scope", "onDropComplete1", data, evt);
    var index = $scope.droppedObjects0.indexOf(data);
    if (index == -1 && data !== null)
        $scope.droppedObjects1.push(data);
};
$scope.onDragSuccess0 = function (data, evt) {
    console.log("133", "$scope", "onDragSuccess0", "", evt);
    var index = $scope.droppedObjects0.indexOf(data);
    if (index > -1 && data) {
        $scope.droppedObjects0.splice(index, 1);
    }
};
$scope.onDragSuccess1 = function (data, evt) {
    console.log("133", "$scope", "onDragSuccess1", "", evt);
    var index = $scope.droppedObjects1.indexOf(data);
    if (index > -1) {
        $scope.droppedObjects1.splice(index, 1);
    }
};
$scope.onDragSuccess2 = function (data, evt) {
    var index = $scope.droppedObjects2.indexOf(data);
    if (index > -1) {
        $scope.droppedObjects2.splice(index, 1);
    }
};
$scope.onDropComplete2 = function (data, evt) {
    var index = $scope.droppedObjects2.indexOf(data);
    if (index == -1 && data !== null) {
        $scope.droppedObjects2.push(data);
    }
};
var inArray = function (array, obj) {
    var index = array.indexOf(obj);
};
$scope.logResults = function() {
     console.log({
        'div1': $scope.droppedObjects0,
        'div2': $scope.droppedObjects1,
        'div3': $scope.droppedObjects2
     });
}
});

.body
{
    width:500px;
    margin-left:auto; 
    margin-right:auto;
}

[ng-drag] {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

[ng-drag] {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.5);
    color: #131313;
    text-align: center;
    padding-top: 12px;
    display: inline-block;
    margin: 5px 5px;
    cursor: move;
    border: 1px solid #ccc;
    border-radius: 4px;
}

ul.draggable-objects:after {
    display: block;
    content: "";
    clear: both;
}

.draggable-objects li {
    float: left;
    display: block;
    width: 50px;
    height: 50px;
    margin:2px;
}

[ng-drag].drag-over {
    border: solid 1px red;
}

[ng-drag].dragging {
    opacity: 0.5;
}

[ng-drop] {
    background: rgba(198, 255, 198, 0.5);
    text-align: center;
    height: 150px;
    padding-top: 10px;
    display: block;
    margin: 20px auto;
    position: relative;
    border: 1px solid #c3c3c3;
    border-radius: 8px;
}

[ng-drop].drag-enter {
    border: solid 5px red;
}

[ng-drop] span.title {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 20px;
    margin-left: -100px;
    margin-top: -10px;
}

[ng-drop] div {
    position: relative;
    z-index: 2;
}
.list-of-drag-item
{
    height: 83px;
    background-color: #f7f7f7;
}

.active {
    background-color: red;
    color: white;
    transition: transform .2s ease-in-out;
}

<link href="http://code.ionicframework.com/1.3.1/css/ionic.min.css" rel="stylesheet"/>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/ngDraggable/0.1.10/ngDraggable.js"></script>

<div ng-app="MyApp" ng-controller="MyCtrl" class="body">
    Categorize the animals based on their reproductive system
<div class="row">
<div class="col">
    <div class="list-of-drag-item" ng-drop="true" ng-drop-success="onDropComplete0($data,$event)" ng-click="onTargetClick(droppedObjects0, $event)">
        <div ng-click="onElementClick($event, obj, droppedObjects0)"  ng-repeat="obj in droppedObjects0" ng-drag="true" ng-drag-data="obj"
            ng-drag-success="onDragSuccess0($data,$event)" ng-center-anchor="{{centerAnchor}}" ng-class="{active: activeElement.name === obj.name}">
           {{obj.name}}
        </div>
    </div>
</div>
</div>
<div class="row" style="text-align: center;">
<div class="col div-left">
    <span class="title">Animals that give birth
    <div ng-drop="true" ng-drop-success="onDropComplete1($data,$event)" ng-click="onTargetClick(droppedObjects1, $event)">
        <div ng-repeat="obj in droppedObjects1" ng-drag="true" ng-drag-data="obj" ng-drag-success="onDragSuccess1($data,$event)" ng-center-anchor="{{centerAnchor}}" ng-click="onElementClick($event, obj, droppedObjects1)" ng-class="{active: activeElement.name === obj.name}">
            {{obj.name}}
        </div>
    </div>
</div>
<div class="col div-right">
    <span class="title">Animals that Laying Eggs</span>
    <div ng-drop="true" ng-drop-success="onDropComplete2($data,$event)" ng-click="onTargetClick(droppedObjects2, $event)">
        <div ng-repeat="obj in droppedObjects2" ng-drag="true" ng-drag-data="obj"
             ng-drag-success="onDragSuccess2($data,$event)" ng-center-anchor="{{centerAnchor}}" ng-click="onElementClick($event, obj, droppedObjects2)" ng-class="{active: activeElement.name === obj.name}">
            {{obj.name}}
        </div>
    </div>
</div>
</div>
   <button ng-click="logResults()">log results</button>
</div>

Div move after click on another div using angular js

Tags:

javascript

html

css

angularjs

Nere

1 Answers

Stefan Negele

Recent Activity

Donate For Us

Div move after click on another div using angular js

Tags:

javascript

html

css

angularjs

Nere

1 Answers

Stefan Negele

Related questions

Recent Activity

Donate For Us