用键移动div

我必须在我的学校为AngularJS创建一个小程序，但我还不是很先进，因为我缺乏基本的训练。用键移动div

我试图使用箭头键进行纹理移动，但我没有任何成功在Internet上找到可用的答案。

如果有人能帮助我，我会很高兴。

下面是我用现在移动它的代码，如果这能帮助：

<!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：angular keypress events.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指令添加到body标签，以确保您在最高级别监听关键事件。您还必须将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

回答

相关问题