Home / Questions / 133530
Accepted
zerokira
Asked: 2020-01-25 13:13:35 +0800 CST 2020-01-25 13:13:35 +0800 CST

Change position to div when I click AngularJS

  • 772

I am trying to position the box azuldepending on the box I hit click, that is, if I hit clickthe green box, the blue box must go down to where the green box is, it cannot be on top, it must be as if I placed the property top: 500px;of cssor something like that.

<html>
   <head>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
   </head>

   <script>
    var app = angular.module("myApp", []); 
    app.controller("myCtrl", function($scope) {

        $scope.showFuncion = function() {
          $scope.showDiv = true;
          $scope.fafa = !$scope.fafa
        }
    });
    </script>
   
    <body ng-app="myApp" ng-controller="myCtrl"> 
      <div class="container">
      <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-6">
          <div style="height: 150px; background-color: red;" ng-click="showFuncion()">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: yellow;" ng-click="showFuncion()">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: green;" ng-click="showFuncion()">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: pink;" ng-click="showFuncion()">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: black;" ng-click="showFuncion()">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
        </div>
        <div class="col-sm-6 col-md-6 col-xs-6" ng-cloak ng-if="showDiv && fafa">
          <div style="height: 150px; background-color: blue;">
            ESTE ES EL LADO IZQUEIRDO DE LA PANTALLA
          </div>
        </div>
      </div>
      </div>


   </body>
</html>

This is the error offsetTopthat shows me in 0

javascript

1 Answers

  1. Best Answer

    I have made the following changes to your code:

    1. I have added $eventas a parameter in the functions that are called from the ng-click. This is so that we can then read the element that was clicked on.
    2. To the element that we want to position, I have added a ng-style(with value "myStyle") and in the CSS styles I have put a relative position (so that when changing the topit moves.
    3. In the called function, I read the element that was clicked on (with $event.currentTarget) and see in what position from above it is located (with offsetTop).
    4. Finally, I change miEstiloto specify the value of topto as many pixels as the clicked element is.

    The code looks like this:

    <html>
   <head>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
   </head>

   <script>
    var app = angular.module("myApp", []); 
    app.controller("myCtrl", function($scope) {

        $scope.showFuncion = function($event) {

          $scope.miEstilo = {'top': $event.currentTarget.offsetTop + 'px'}
          $scope.showDiv = true;
          $scope.fafa = !$scope.fafa
        }
    });
    </script>
   
    <body ng-app="myApp" ng-controller="myCtrl"> 
      <div class="container">
      <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-6">
          <div style="height: 150px; background-color: red;" ng-click="showFuncion($event)">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: yellow;" ng-click="showFuncion($event)">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: green;" ng-click="showFuncion($event)">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: pink;" ng-click="showFuncion($event)">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: black;" ng-click="showFuncion($event)">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
        </div>
        <div class="col-sm-6 col-md-6 col-xs-6" ng-cloak ng-if="showDiv && fafa">
          <div ng-style="miEstilo" style="height: 150px; background-color: blue; position: relative;">
            ESTE ES EL LADO IZQUEIRDO DE LA PANTALLA
          </div>
        </div>
      </div>
      </div>


   </body>
</html>

    • 3