it-swarm.com.de

wie man ein div mit den pfeiltasten bewegt

Ich möchte ein Div mit meinen Pfeiltasten mit jQuery verschieben. Also rechts, links, unten und oben.

Fand eine Demo von dem, was ich erreichen möchte hier

Ich möchte gerne ein Div in ein anderes Div verschieben.

Wie kann das gemacht werden?

17
Opoe

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);

Variable Erklärungen:
w - der maximale linke/obere Wert, den die Box haben kann (um innerhalb der Grenzen zu bleiben)
x - die Entfernung (in px), um die sich die Box in jedem Intervall bewegt
d - Dieses Objekt speichert die Information, welche Taste gedrückt wird. Während der Benutzer beispielsweise die NACH-LINKS-TASTE gedrückt hält, ist d['37']true. Ansonsten ist es false. Übrigens ist 37 der Schlüsselcode für den LEFT ARROW-Schlüssel, und dieser Wert wird in der e.which-Eigenschaft des Ereignisobjekts gespeichert. Das d-Objekt wird bei jedem keydown- und keyup-Ereignis aktualisiert. 

Ein setInterval, das alle 20 ms ausgeführt wird, aktualisiert die linken und oberen CSS-Eigenschaften des box-Elements. Die neuen Werte werden über die Funktion newv berechnet.

Die newv-Funktion berechnet den neuen linken/oberen Wert basierend auf a) dem alten Wert v und b) dem d-Objekt. 

Der Ausdruck n < 0 ? 0 : n > w ? w : n stellt sicher, dass der neue Wert in den zulässigen Grenzen (die 0 to w sind) liegt. Wenn n <0 ist, wird Null zurückgegeben. Wenn n> w ist, wird w zurückgegeben. 


Live-Demo: http://jsfiddle.net/simevidas/bDMnX/1299/


Update: Dieser Code hat die gleiche Funktionalität wie der Originalcode oben. Der einzige Unterschied ist, dass ich für meine Variablen und Argumente aussagekräftigere Namen verwendet habe. Wie Sie sehen, sieht es schrecklich aus - die Originalversion ist deutlich besser. :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);
37
Šime Vidas

@ Šime Vidas: Deine erste Lösung ist einfach großartig. (Ich denke der zweite ist überflüssig =)

Darf ich vorschlagen, zwei verschiedene Funktionen für die vertikale und die horizontale Breite zu erstellen? Weil es höchst unwahrscheinlich ist, dass Sie sich innerhalb eines perfekten Quadrats um ein Div bewegen müssen, und ich glaube, es wäre schöner, so etwas zu haben:

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

Das wäre genau das, wonach ich gesucht hatte.

Wenn Sie ein responsives Design basierend auf% -Werten hätten, wäre es empfehlenswert, Ihr setInterval wie folgt anzupassen:

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);

wenn Sie dies tun, wird die Höhe und Breite Ihrer Fenster angepasst, und die Box bleibt am Rand stehen.

ich habe hier eine Geige gemacht http://jsfiddle.net/infidel/JkQrR/1/

Danke vielmals.

7
infidel

Ich kann Ihre Demo nicht sehen, aber hier ist ein einfaches "Bewegen der Box 1px in Richtung der Pfeiltasten" Beispiel:

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

Markup:

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

JS (mit jQuery):

$("#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;
    }
});

Dies ist nur ein Beispiel. Möglicherweise möchten Sie Begrenzungsprüfungen, größere Bewegungen, weichere Animationen, Nummernblockunterstützung oder eine beliebige Anzahl anderer Dinge hinzufügen, aber es sollte Ihnen den Einstieg erleichtern.

3
jball

Um es wiederzuverwenden und etwas bequemer zu machen, habe ich ein Plugin für dieses Problem geschrieben:

https://github.com/rhermann/moveByKeys

Viel Spass damit.

1
Robert

versuchen Sie diesen Code

<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>
0
hojjat.mi