jQuery Yön Tuşalarıyla Div Hareket Ettirme

sdkbyrm · 23 Aralık 2020

Bu örneğimizde jQuery ile kullanıcın klavyeden basmış olduğu tuşu alarak, bu tuşların yön tuşları olması durumunda sayfamıza eklemiş olduğumuz div öğesinin (kutu) hareket etmesini sağlayacağız.

var code = (event.which) ? event.which : event.keyCode;

kod satırı ile basılan tuş kodunu alarak bu tuş klavyedeki yön tuşlarından biri olması durumunda gerekli işlemi gerçekleştireceğiz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yazilimkodlama.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#kutu{
height: 100px;
width: 100px;
background-color: red;
position: absolute;
}
</style>
</head>

<body>
<div id="kutu"></div>

<script>
var x = 10, y = 10;
$(document).ready(function(){
}).keydown(function(event)
{

var code = (event.which) ? event.which : event.keyCode;
if(code == 37)
{ x = x - 3;
$("#kutu").css("left", x+"px")}
if(code == 38)
{ y = y - 3;
$("#kutu").css("top", y+"px");}
if(code == 39)
{ x = x + 3;
$("#kutu").css("left", x+"px");}
if(code == 40)
{ y = y + 3;
$("#kutu").css("top", y+"px");}
});
</script>
</body>
</html>

Ekran Çıktısı:

jQuery Yön Tuşalarıyla Div Hareket Ettirme

sdkbyrm