Переместить div с помощью клавиш

Мне нужно создать небольшую программу в AngularJS для моей школы, но я еще не очень продвинутый, потому что мне не хватает базового обучения.Переместить div с помощью клавиш

Я попытался сделать движение текстуры с помощью клавиш со стрелками, но у меня не было никакого успеха найти полезный ответ в Интернете.

Буду рад, если бы кто-нибудь мне помог.

Вот код, я использую сейчас, чтобы переместить его, если это помогает:

<!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>

источник

2016-09-27 Alessio van Ferkel

Существует уже подобный вопрос: http://stackoverflow.com/questions/7782266/jquery-move-div-with-arrow-keys –

@ ThomasJames - цитируемый ответ использует jQuery! – Pugazh

Вы, вероятно, захотите посмотреть на этот вопрос re: угловые события нажатия клавиш.http: //stackoverflow.com/questions/17470790/how-to-use-a-keypress-event-in-angularjs – dwjohnston

Чтобы сделать текстуру двигаться с помощью клавиш со стрелками. Попробуйте

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>

источник

2016-09-27 11:42:57 Jigarb1992

Угловой имеют директивы, которые позволят вам легко слушать ключевые события. Думаю, ng-keyup должен отлично работать для вас.

Вам нужно будет добавить директиву ng-keyup телу тела, чтобы вы прослушивали ключевые события на самом высоком уровне. Вам также придется переместить свои ng-app и ng-controller директивы в тег body тоже, чтобы функция, которую вы объявляете для ключевых событий, находится в правильной области.

Меняет

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

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

Вы тогда будете в состоянии сделать что-то с этими событиями в контроллере.

Так добавьте в ваш контроллер:

$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; 
    } 
};

источник

2016-09-27 11:49:59

Переместить div с помощью клавиш

ответ

Смежные вопросы