用鍵移動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

回答

相關問題