web-dev-qa-db-fra.com

comment déplacer une div avec les touches fléchées

Je voudrais déplacer une div avec les touches fléchées en utilisant jQuery. Donc, à droite, à gauche, en bas et en haut.

J'ai trouvé une démo de ce que je veux accomplir ici

J'aimerais pouvoir déplacer une div dans une autre div.

Comment cela peut-il être fait?

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

Explications variables:
w - la valeur maximale gauche/supérieure que la boîte peut avoir (pour rester dans les limites)
x - la distance (en px) que la case se déplace dans chaque intervalle
d - cet objet stocke les informations sur la touche enfoncée. Par exemple, lorsque l'utilisateur appuie sur la touche GAUCHE, d['37'] est true. Sinon, c'est false. BTW, 37 est le code-clé de la touche GAUCHE et cette valeur est stockée dans la propriété e.which de l'objet événement. L'objet d est en cours de mise à jour à chaque événement keydown et keyup. 

Un setInterval exécuté toutes les 20 ms met à jour les propriétés CSS gauche et supérieure de l'élément box. Les nouvelles valeurs sont calculées via la fonction newv.

La fonction newv calculera la nouvelle valeur gauche/supérieure en fonction a) de l'ancienne valeur v et b) de l'objet d. 

L'expression n < 0 ? 0 : n > w ? w : n garantit que la nouvelle valeur se trouve dans les limites autorisées (qui sont 0 to w). Si n est <0, zéro sera renvoyé. Si n est> w, w sera retourné. 

Démo en direct: http://jsfiddle.net/simevidas/bDMnX/1299/

Mise à jour: Ce code a les mêmes fonctionnalités que le code d'origine ci-dessus. La seule différence est que j'ai utilisé des noms plus significatifs pour mes variables et arguments. Comme vous pouvez le constater, cela semble affreux - la version originale est nettement meilleure. :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: Votre première solution est tout simplement merveilleuse. (Je pense que le second est redondant =)

Puis-je suggérer de créer deux fonctions différentes pour la largeur verticale et horizontale? Parce qu’il est très improbable que vous deviez vous déplacer dans une div à l’intérieur d’un carré parfait et je pense qu’il serait plus agréable d’avoir quelque chose comme ceci:

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

Cela aurait été exactement ce que je cherchais.

Si votre conception réactive est basée sur les valeurs%, il est recommandé d'ajuster votre setInterval comme suit:

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

si vous le faites, la hauteur et la largeur de vos vitres sont ajustées et la boîte s'arrête toujours à sa bordure.

j'ai fait un violon de cela ici http://jsfiddle.net/infidel/JkQrR/1/

Merci beaucoup.

7
infidel

Je ne vois pas votre démo, mais voici un exemple simple: "déplacez la boîte de 1px dans le sens des touches fléchées":

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

Balisage:

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

JS (en utilisant 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;
    }
});

Ceci n’est qu’un exemple. Vous voudrez peut-être ajouter une vérification des limites, des mouvements plus importants, une animation plus fluide, la prise en charge du pavé numérique, etc., mais cela devrait vous aider à démarrer.

3
jball

Pour le réutiliser, et un peu pratique, j'ai écrit un plugin pour ce problème sur:

https://github.com/rhermann/moveByKeys

Aie du plaisir avec ça.

1
Robert

essayez ce 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