矢印キーでdivを移動する方法

Question

jQueryを使用して矢印キーでdivを移動したいと思います。 右、左、下、上。

は、私は別のdivの周りのdivを移動できるようにしたいと思い、私はhere

を達成するために何をしたいのデモを発見しました。

どうすればいいですか？

Answer 1

HTML：

<div id="pane"> 
    <div id="box"></div> 
</div> 

CSS：

#pane { 
    position:relative; 
    width:300px; height:300px; 
    border:2px solid red; 
} 

#box { 
    position:absolute; top:140px; left:140px; 
    width:20px; height:20px;   
    background-color:black; 
} 

はJavaScript：

var pane = $('#pane'), 
    box = $('#box'), 
    w = pane.width() - box.width(), 
    d = {}, 
    x = 3; 

function newv(v,a,b) { 
    var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0); 
    return n < 0 ? 0 : n > w ? w : n; 
} 

$(window).keydown(function(e) { d[e.which] = true; }); 
$(window).keyup(function(e) { d[e.which] = false; }); 

setInterval(function() { 
    box.css({ 
     left: function(i,v) { return newv(v, 37, 39); }, 
     top: function(i,v) { return newv(v, 38, 40); } 
    }); 
}, 20); 

変数の説明：
w - 最大左/ボックスが持つことができることを、トップ値（限界内にとどまる）
x - 各間隔でボックスが移動する距離（単位：px）
d - このオブジェクトは、どのキーが押されているかに関する情報を格納します。例えば、ユーザが左矢印キーを押している間に、d['37']はtrueです。それ以外の場合はfalseです。 BTWの37は、左矢印キーのキーコードです。この値は、イベントオブジェクトのe.whichプロパティに格納されています。 dオブジェクトは、それぞれ​​およびkeyupイベントで更新されています。

20ミリ秒ごとに実行されるsetIntervalは、ボックス要素の左と上のCSSプロパティを更新します。新しい値はnewv関数で計算されます。

newv関数は、a）古い値vとb）dオブジェクトに基づいて、新しい左上の値を計算します。

式n < 0 ? 0 : n > w ? w : nは、新しい値が許可された範囲（0 to w）にあることを保証します。 nが<の場合、ゼロが返されます。 nが> wの場合、wが返されます。

---

ライブデモ：http://jsfiddle.net/simevidas/bDMnX/1299/

---

更新：このコードは、上記の元のコードと同じ機能を持っています。唯一の違いは、私が変数と引数に意味のある名前を使用したことです。ご覧のように、それはひどいように見えます - 元のバージョンは明らかに優れています。それを楽しんで

https://github.com/rhermann/moveByKeys

：リユースそれを作るために:P

var pane = $('#pane'), 
    box = $('#box'), 
    maxValue = pane.width() - box.width(), 
    keysPressed = {}, 
    distancePerIteration = 3; 

function calculateNewValue(oldValue, keyCode1, keyCode2) { 
    var newValue = parseInt(oldValue, 10) 
        - (keysPressed[keyCode1] ? distancePerIteration : 0) 
        + (keysPressed[keyCode2] ? distancePerIteration : 0); 
    return newValue < 0 ? 0 : newValue > maxValue ? maxValue : newValue; 
} 

$(window).keydown(function(event) { keysPressed[event.which] = true; }); 
$(window).keyup(function(event) { keysPressed[event.which] = false; }); 

setInterval(function() { 
    box.css({ 
     left: function(index ,oldValue) { 
      return calculateNewValue(oldValue, 37, 39); 
     }, 
     top: function(index, oldValue) { 
      return calculateNewValue(oldValue, 38, 40); 
     } 
    }); 
}, 20); 

Answer 2

私はあなたのデモを見るが、ここでは簡単な例「矢印キーの方向にボックスの1ピクセルを移動」だことはできません。

CSS：

#wrapper { 
    background-color: gray; 
    height:200px; 
    width: 200px; 
    position:absolute; 
} 
#mover { 
    background-color: white; 
    border: 1px solid red; 
    height:20px; 
    width: 20px; 
    position:relative; 
} 

をマークアップ：

<div id="wrapper"> 
    <div id="mover"></div> 
</div> 

（jQueryの使用）

JS：

$("#wrapper").keydown(function(event) { 
    var $mover = $("#mover"); 
    //if nothing else will move "mover", then track the 
    //position instead of recalculating it every time: 
    // var moverPos = $mover.position(); 
    // var left = moverPos.left; 
    // var top = moverPos.top; 
    var addTop = function(diff) { 
     $mover.css("top", ($mover.position().top + diff) + "px"); 
     //if using tracked position: 
     // top += diff; 
     // $mover.css("top", top) + "px"); 
    }; 

    var addLeft = function(diff) { 
     $mover.css("left", ($mover.position().left + diff) + "px"); 
     //if using tracked position: 
     // left += diff; 
     // $mover.css("left", left) + "px"); 
    }; 

    switch(event.keyCode) { 
     case 37: //left 
      addLeft(-1); break; 
     case 38: //up 
      addTop(-1); break; 
     case 39: //right 
      addLeft(1); break; 
     case 40: //down 
      addTop(1); break; 
    } 
}); 

これは単なる例です。境界チェック、大きな動き、よりスムーズなアニメーション、ナンバーパッドのサポートなどを追加することもできますが、開始する必要があります。

Answer 3

、と少し便利な、私は上でその問題のためのプラグインを書きました。

Answer 4

@ŠimeVidas：あなたの最初の解決策は、単に素晴らしいことです。 （私は2番目が冗長であると思う=）

縦と横の幅に2つの異なる機能を作ることをお勧めしますか？それはあなたが完璧な正方形の内側のdivを移動しなければならないことを非常に低いだと私は信じているので、このような何かを持っているよりよいだろう：

$(function() { 
var pane = $('#pane'), 
box = $('#box'), 
wh = pane.width() - box.width(), 
wv = pane.height() - box.height(), 
d = {}, 
x = 5; 

function newh(v,a,b) { 
    var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0); 
    return n < 0 ? 0 : n > wh ? wh : n; 
} 

function newv(v,a,b) { 
    var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0); 
    return n < 0 ? 0 : n > wv ? wv : n; 
} 

$(window).keydown(function(e) { d[e.which] = true; }); 
$(window).keyup(function(e) { d[e.which] = false; }); 

setInterval(function() { 
    box.css({ 
     left: function(i,v) { return newh(v, 37, 39); }, 
     top: function(i,v) { return newv(v, 38, 40); } 
    }); 
}, 20); 
}); 

これは私が探していたまさにされていると思います。

あなたは％値に基づいて、応答性の設計を持っていた場合、このようなあなたのsetIntervalを調整することが推奨次のようになります。

setInterval(function() { 
    box.css({ 
     left: function(i,v) { return newh(v, 37, 39); }, 
     top: function(i,v) { return newv(v, 38, 40); } 
    }); 
    wh = pane.width() - box.width(); 
    wv = pane.height() - box.height(); 
}, 20); 

あなたはそれがあなたのペインの高さと幅を調整し、ボックスは、まだその時に停止することを行った場合境界。

私はここhttp://jsfiddle.net/infidel/JkQrR/1/

おかげでたくさんのことのフィドルを作りました。

Answer 5

は絶対に-位置付け `div`でHTMLやCSSを作成します）

<html> 
<head> 
    <style> 
      #ss{ 
       background:#ccc; 
       height:100px; 
       width:100px; 
       position: absolute; 
       top: 0; 
       left: 0; 
      } 
    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
    </script> 
</head> 
<body> 
    <div id="ss"></div> 
</body> 

<script type="text/javascript">  
var $div = $('#ss'); 
$(document).keydown(function(e) { 
    switch (e.which) { 
     case 37: 
       $div.css('left', $div.offset().left - 10); 
       break; 
     case 38: 
       $div.css('top', $div.offset().top - 10); 
       break; 
     case 39: 
       $div.css('left', $div.offset().left + 10); 
       break; 
     case 40: 
       $div.css('top', $div.offset().top + 10); 
       break; 
     } 
    }) 
</script> 

</html>