Déplacer div avec les touches

Je dois créer un petit programme dans AngularJS pour mon école, mais je ne suis pas encore très avancé, parce que je manque de formation de base.Déplacer div avec les touches

J'ai essayé de faire un mouvement de texture en utilisant les touches fléchées, mais je n'ai pas réussi à trouver une réponse utilisable sur Internet.

Je serais heureux si quelqu'un pouvait m'aider.

Voici le code que je l'utilise pour l'instant pour le déplacer, si cela aide:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Angular Game</title> 
     <meta charset="utf-8"> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    </head> 

    <body bgcolor="#151B54"> 
     <div ng-app="myApp" ng-controller="myCtrl"> 
      <div id="myDiv" ng-style=" {'position':'relative','height':'20px','width':'92px','background-color':'#348781','left': divleft+'px','top':divtop+'px'}">Raumschiff</div> 

      <input type="button" ng-mousedown="goLeft()" value="<"> <input type="button" ng-mousedown="goRight()" value=">"><br> 
      <input type="button" ng-mousedown="goDown()" value="v"> <input type="button" ng-mousedown="goUp()" value="^"> 

      <input type="button" ng-click="startInterval()" value="start"> 

    </div> 

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

      $scope.divleft = 200; 
      $scope.divtop = 300; 

      $scope.goRight = function() 
      { 
       $scope.divvel2 +=1; 
      } 

       $scope.goLeft = function() 
      { 
       $scope.divvel2 -=1; 
      } 

      $scope.goUp = function() 
      { 
       $scope.divvel +=1; 
      } 
      $scope.goDown = function() 
      { 
       $scope.divvel -=1; 
      } 

      $scope.moveDiv = true; 
      var intervalHandler; 
      $scope.divvel ="0"; 
      $scope.divvel2 ="0"; 
      $scope.startInterval = function() 
      { 

       $interval.cancel(intervalHandler); 
       intervalHandler = $interval(myIntervalFunction,50); 
      } 


      myIntervalFunction = function() 
      { 
       $scope.divtop-=parseInt($scope.divvel); 
       $scope.divleft+=parseInt($scope.divvel2); 
      } 
     }); 

     </script> 
    </body> 
</html>

Source

2016-09-27 Alessio van Ferkel

Il existe déjà une question similaire: http://stackoverflow.com/questions/7782266/jquery-move-div-with-arrow-keys –

@ ThomasJames - La réponse citée utilise jQuery! – Pugazh

Vous avez probablement envie de regarder cette question re: les événements de la touche angulaire.http: //stackoverflow.com/questions/17470790/how-to-use-a-keypress-event-in-angularjs – dwjohnston

Pour faire un mouvement de texture à l'aide des touches fléchées. Essayez cette

var app = angular.module('myApp', []); 
 
     app.controller('myCtrl', function($scope,$interval) { 
 

 
      $scope.divleft = 100; 
 
      $scope.divtop = 30; 
 

 
      $scope.goRight = function() 
 
      { 
 
       $scope.divleft +=1; 
 
      } 
 

 
       $scope.goLeft = function() 
 
      { 
 
       $scope.divleft -=1; 
 
      } 
 

 
      $scope.goUp = function() 
 
      { 
 
       $scope.divtop -=1; 
 
      } 
 
      $scope.goDown = function() 
 
      { 
 
       $scope.divtop +=1; 
 
      } 
 

 
      
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 

 
     <div ng-app="myApp" ng-controller="myCtrl"> 
 
      <div id="myDiv" ng-style=" {'position':'relative','height':'20px','width':'92px','background-color':'#348781','left': divleft+'px','top':divtop+'px'}">Raumschiff</div> 
 

 
      <input type="button" ng-mousedown="goLeft()" value="<"> <input type="button" ng-mousedown="goRight()" value=">"><br> 
 
      <input type="button" ng-mousedown="goDown()" value="v"> <input type="button" ng-mousedown="goUp()" value="^"> 
 

 

 
    </div>

Source

2016-09-27 11:42:57 Jigarb1992

angulaire a des directives qui vous permettront d'écouter facilement les événements clés. Je pense que ng-keyup devrait fonctionner correctement pour vous.

Vous aurez besoin d'ajouter la directive ng-keyup à la balise body pour vous assurer que vous écoutez les événements clés au plus haut niveau. Vous devrez également déplacer vos directives ng-app et ng-controller vers la balise body afin que la fonction que vous déclarez pour vos événements clés soit dans la bonne portée.

changer Alors

<body bgcolor="#151B54"> 
    <div ng-app="myApp" ng-controller="myCtrl">

<body bgcolor="#151B54" ng-app="myApp" ng-controller="myCtrl" ng-keyup="handleKeyup($event)"> 
    <div>

Vous serez alors en mesure de faire quelque chose avec ces événements dans votre contrôleur.

ajouter donc ceci à votre contrôleur:

$scope.handleKeyup = function (e) { 
    switch (e.which) { 
     case 37: 
      $scope.goLeft(); 
      break; 
     case 38: 
      $scope.goUp(); 
      break; 
     case 39: 
      $scope.goRight(); 
      break; 
     case 40: 
      $scope.goDown(); 
      break; 
    } 
};

Source

2016-09-27 11:49:59

Déplacer div avec les touches

Répondre

Questions connexes