0

Tengo un div que quiero mover usando las flechas del teclado usando jquery, el problema es que solo lo doy movido a la derecha y se sale del section donde tiene que estar. El html y css del ejercicio:

<section id="square">
    <div id="hijo">
    </div>
</section>
#square {
  border: 1px solid black;
  height: 300px;
  margin: 20px auto;
  position: relative;
  width: 60%;
}

#square #hijo {
  background-color: red;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50px;
  height: 50px;
}

Mi jquery:

$(document).keydown(function(tecla){
    $('#hijo').css('position', 'relative');
    if (tecla.keyCode == 37) { 
        $('#hijo').animate({right: "+=10px"}, 'fast');
    }else if(tecla.keyCode == 38) { 
        $('#hijo').animate({up: "+=10px"}, 'fast'); 
    }else if(tecla.keyCode == 39){ 
        $('#hijo').animate({left: "+=10px"}, 'fast'); 
    }else if(tecla.keyCode == 40){
        $('#hijo').animate({down: "+=10px"}, 'fast');
    }
});

Nota: no quiero modificar los archivos html y css si no hacer todo con jquery

2 respuestas 2

1

Con un switch y utilizando el event.which para obtener la tecla que realizó el evento funciona correctamente, es cuestión de sumar y restar los pixeles hacia arriba y a la izquierda (top, left), te dejo el ejemplo:

$(document).keydown(function(tecla){
//$('#hijo').css('position', 'relative');
    switch (tecla.which) {
    case 37:
        $('div').animate({
            left: '-=10px'
        }, 'fast'); //left arrow key
        break;
    case 38:
        $('div').animate({
            top: '-=10px'
        }, 'fast');
        break;
    case 39:
        $('div').animate({
            left: '+=10px'
        }, 'fast');
        break;
    case 40:
        $('div').animate({
            top: '+=10px'
        }, 'fast');
        break;
    }
});
#square {
  border: 1px solid black;
  height: 300px;
  margin: 20px auto;
  position: relative;
  width: 60%;
}

#square #hijo {
    background:#ccc;
    height:100px;
    width:100px;
    position: absolute;
    top: 0;
    left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="square">
    <div id="hijo">
    </div>
</section>

Te dejo también el ejemplo en tu versión de código con el mismo concepto del top y left que te comenté por si lo necesitas:

$(document).keydown(function(tecla){
    $('#hijo').css('position', 'relative');
    if (tecla.keyCode == 37) { 
        $('#hijo').animate({left: "-=10px"}, 'fast');
    }else if(tecla.keyCode == 38) { 
        $('#hijo').animate({top: "-=10px"}, 'fast'); 
    }else if(tecla.keyCode == 39){ 
        $('#hijo').animate({left: "+=10px"}, 'fast'); 
    }else if(tecla.keyCode == 40){
        $('#hijo').animate({top: "+=10px"}, 'fast');
    }
});
#square {
  border: 1px solid black;
  height: 300px;
  margin: 20px auto;
  position: relative;
  width: 60%;
}

#square #hijo {
  background-color: red;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50px;
  height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="square">
    <div id="hijo">
    </div>
</section>

Te comento que en mi ejemplo dejé una línea comentada en el JQuery, ya que si observas en tu css le estás dando una posición absolute y luego en tu JQuery una posición relative. Espero te ayude esta solución. Saludos.

2
  • Al final estoy usando el switch, yo tiendo a usar mucho el if a pesar de que en casos como este un switch queda mejor. Ahora solo falta que el div no se salga del section que lo encierra.
    – JPillado
    el 25 mar. 2020 a las 18:52
  • @JPillado eso ya sería que juegues un poco con el código y lo intentes por ti mismo, si quedas atorado y tienes inconvenientes te recomiendo abrir otra pregunta. Si te ayudó mi respuesta agradecería que lo marques como correcto. Saludos el 25 mar. 2020 a las 19:24
0
  1. Tu listener de eventos del teclado en document pone a tu contenedor a competir con muchas otras cosas. Yo acotaría el problema declarando el listener sobre #hijo. Para que pueda escuchar eventos del teclado tiene que ser un elemento focusable así que lo convertí en un input. Ahí tú le daras estilo como mejor puedas.

  2. La posición del elemento se determina por sus coordenadas X e Y, en este caso left y top. Definir propiedades contradictorias para left y right cuando las dimensiones del elemento son fijas no tiene mucho efecto.

  3. dado que conoces las dimensiones del contenedor, y las del hijo, sabes que para que no se salga se debe cumplir que

    • top y left no pueden ser menores a cero
    • left no puede ser mayor que (ancho_contenedor - ancho_elemento)
    • top no puede ser mayor que (altura_contenedor - altura_elemento)

Yo guardaría el estado interno del elemento usando data attributes. Dependiendo de la tecla modifico el valor pero con la restricción que puse antes.

PD: usé key en vez de keyCode. Es más intuitivo pq son nombres.

let hijo = $('#hijo'),
  square = $('#square'),
  coords = $('#coords'),
  squareWidth = square.width(),
  squareHeight = square.height(),
  pressed = $('#pressed');

hijo.keydown(function(keyboardEvent) {
  hijo.css('position', 'relative');
  keyboardEvent.preventDefault();
  keyboardEvent.stopPropagation();
  let {
    key
  } = keyboardEvent, {
    top,
    left
  } = hijo.data();

  pressed.text(`You pressed key ${key}`);
  if (key == 'ArrowLeft') {
    left = Math.max(0, left - 10);
  } else if (key == 'ArrowUp') {
    top = Math.max(0, top - 10);
  } else if (key == 'ArrowRight') {
    left = Math.min(squareWidth - 50, left + 10);
  } else if (key == 'ArrowDown') {
    top = Math.min(squareHeight - 50, top + 10);
  }
  hijo.animate({
    top,
    left
  }, 'fast').data({
    top,
    left
  });
  coords.text(`left:${left}, top:${top}`);
});
#square {
  border: 1px solid black;
  height:160px;
  margin: 25px auto;
  position: relative;
  width: 450px;
}

#square #hijo {
  background-color: red;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 50px;
  height: 50px;
}

#pressed {
  position: absolute;
  left: 50%;
  top: 0;
  font-size: 0.9em;
  width: 140px;
  height: 20px;
}

#coords {
  position: absolute;
  left: 50%;
  top: 175px;
  font-size: 0.9em;
  width: 150px;
  height: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre id="pressed"></pre>

<section id="square">
  <input id="hijo" data-top="100" data-left="100" />

</section>
<pre id="coords"></pre>

2
  • los archivos html y css forman parte del ejercicio que estoy haciendo y por tanto estos NO PUEDO MODIFICARLOS, tienen que estar tal cual lo puse en la pregunta. lo que tengo que hacer el el jquery
    – JPillado
    el 24 mar. 2020 a las 18:14
  • Ya veo. Ojalá des con la solución
    – ffflabs
    el 24 mar. 2020 a las 18:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.