come spostare un div con i tasti freccia

Vorrei spostare un div con i miei tasti freccia utilizzando jQuery.
Quindi, a destra, a sinistra, in basso e in alto.

Trovato una demo di quello che voglio realizzare qui

Vorrei essere in grado di spostare un div in giro in un altro div.

Come questo può essere fatto?

  • 1) Creare in HTML e CSS con posizione assoluta div. Traccia 2) i tasti freccia tasto. 3) Modificare il CSS top e left proprietà del div, come appropriato. Con quali di questi sono problemi?
  • Beh, numero 2, perché non so come sono in grado di collegare i tasti freccia per un div
  • Hai postato un esempio, nella tua domanda.. con il codice.. che cosa avete bisogno da noi?
  • Beh, mi dispiace, non c’è una versione più corta?
  • L’esempio mostra come ri-disegnare un quadrato all’interno di un Canvas HTML5. Non è la stessa come lo spostamento di un div.
  • E ho bisogno di qualche aiuto, ho appena dato l’esempio per mostrare quello che voglio; non con la tela, ma con un div muoversi in un altro div

InformationsquelleAutor Opoe | 2011-02-09

 

5 Replies
  1. 37

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

    Variabile spiegazioni:

    w – il massimale/sinistro alto valore che la scatola può avere (per rimanere entro certi limiti)

    x – la distanza (in px) che la scatola si muove in ogni intervallo

    d – questo oggetto contiene le informazioni su ciò che il tasto viene premuto. Per esempio, mentre l’utente tiene premuto il tasto FRECCIA SINISTRA, d['37'] è true. Altrimenti è false. BTW, 37 è la chiave-codice per il tasto FRECCIA a SINISTRA e questo valore viene memorizzato nel e.which proprietà dell’oggetto evento. Il d oggetto è in corso di aggiornamento su ogni keydown e keyup evento.

    Un setInterval che viene eseguito ogni 20ms, aggiornamenti sinistro e superiore della proprietà CSS dell’elemento della casella di. I nuovi valori sono calcolati tramite il newv funzione.

    Il newv funzione di calcolare la nuova sinistra/alto valore basato su: a) il valore precedente v e b) il d oggetto.

    L’espressione n < 0 ? 0 : n > w ? w : n assicura che il nuovo valore consentito limiti (che sono 0 to w). Se n ‘ < 0, zero, saranno restituiti. Se n ‘ > w, w, saranno restituiti.


    Live demo: http://jsfiddle.net/simevidas/bDMnX/1299/


    Aggiornamento: Questo codice ha la stessa funzionalità come il codice originale di cui sopra. L’unica differenza è che ho usato nomi più significativi per la mia variabili e parametri. Come si può vedere, sembra terribile – la versione originale è decisamente migliore. :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);
    • Una mancanza di rispetto previsto, ma nonostante questo codice funziona meravigliosamente (è davvero bello), i nomi delle variabili mi fanno sentire come se fossi un codice offuscato la concorrenza. Leggendo il codice è difficile, perché nulla ha un nome significativo diverso pane e box (e la pila ternario operatori non aiutano). Ma come ho detto, che funziona davvero bene.
    • Non sono impilati ternario operatori pulito? :) Una volta a capire che cosa fanno, si farà esplodere la tua mente, hehe. Ma, sì, io, probabilmente, dovrebbe fornire una spiegazione del mio codice. Dammi un secondo …
    • Vidas l’ho con voto positivo è comunque, ma penso che più chiaro i nomi di variabile sarebbe meglio che spiegare il carattere di quelli 🙂
    • Io non sono d’accordo. In uno scenario del mondo reale, il codice dovrebbe essere documentato. Non so se c’è qualcosa di sbagliato con il mio cervello :), ma io trovo più facile la lettura del codice che utilizza una lettera di nomi di variabili, rispetto al codice con più e più significativa nomi di variabili. Tuttavia, ho riscritto il mio codice utilizzando il tuo consiglio e pubblicato il risultato nella mia risposta. Cosa pensi, che sia la versione migliore?
    • Vidas preferisco di gran lunga il secondo esempio. 🙂
    • Vidas Grazie per questa risposta impressionante

  2. 7

    @Šime Vidas: la Tua prima soluzione è semplicemente meraviglioso. (penso la seconda è ridondante =)

    Suggerisco di fare due funzioni diverse per la verticale e l’orizzontale larghezza? Poiché è altamente improbabile che ti devi spostare un div all’interno di un quadrato perfetto e credo che sarebbe bello avere qualcosa di simile a questo:

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

    Questo sarebbe stato esattamente quello che stavo cercando.

    Se si aveva un design responsive basato su valori % sarebbe raccomandabile per regolare il setInterval come questo:

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

    se si che regola il riquadri altezza e la larghezza e la scatola ancora ferma al suo confine.

    ho fatto un violino che qui http://jsfiddle.net/infidel/JkQrR/1/

    Grazie mille.

    • Questo è esattamente quello che stavo cercando. La tua risposta ha bisogno di più upvotes!
  3. 3

    Non riesco a vedere la demo, ma qui è un semplice “spostare la casella 1px nella direzione della freccia” esempio:

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

    Questo è solo un esempio, si potrebbe desiderare di aggiungere la verifica dei limiti, grandi movimenti, animazioni più fluide, numero di cuscinetto di supporto o un qualsiasi numero di altre cose, ma dovrebbe iniziare.

  4. 0

    provare Questo Codice

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

Lascia un commento