Move by divs using the arrow keys

-2

At some point back I came across a jQuery plugin where I could move through the divs, menus, images ... using the directional arrows on the keyboard.

I've tried a lot about it but I can not find anything.

Does anyone know of this or any plugin that does this work, or has any logic how to do this?

    
asked by anonymous 05.12.2017 / 15:55

1 answer

0

To work with a class for the Divs and with the KeyCodes intercepting the keyup event in javascript would look more or less like this, try to understand and adapt your need.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script><style>.container{display:grid;grid-template-columns:autoautoautoautoautoautoauto;height:500px;width:80%;margin:100pxauto0;/*background:#e3e3e3;*/grid-auto-rows:autoautoauto;grid-gap:2em;}.item{border:2pxsolidblack;}.selected{background:grey;}</style><divclass="container">
    <div class="item selected">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item" data-dia="1">8</div>
    <div class="item" data-dia="2">9</div>
    <div class="item" data-dia="3">10</div>
    <div class="item" data-dia="4">11</div>
    <div class="item" data-dia="5">12</div>
    <div class="item" data-dia="6">13</div>
    <div class="item" data-dia="7">14</div>
    <div class="item" data-dia="1">15</div>
    <div class="item" data-dia="2">16</div>
    <div class="item" data-dia="3">17</div>
    <div class="item" data-dia="4">18</div>
    <div class="item" data-dia="5">19</div>
    <div class="item" data-dia="6">20</div>
    <div class="item" data-dia="7">21</div>
</div>


  

  <script>
    $(document).on('keyup', function (e) {

        // ATRIBUINDO O KEY CODE PARA AS VARIAVEIS PARA MELHOR LEGIBILIDADE
        let right = 39;
        let left = 37;
        let up = 38;
        let down = 40;

        // VARIAVEIS AUXILIARES PARA NAVEGACAO
        let index = 1;
        let totalColunas = 7;
        let proximo = 1;

        // VERIFICA SE A TECLA QUE ESTÁ SENDO DISPARADA É ALGUMA TECLA QUE QUEREMOS TRABALHAR EM CIMA
        if (e.keyCode === right || e.keyCode === left || e.keyCode === up || e.keyCode === down) {

            // PERCORE TODAS AS DIVS DA CLASSE ITEM PARA SETAR O INDICE DA PROXIMA
            $.each($('.item'), function () {
                if ($(this).hasClass('selected')) {
                    switch (e.keyCode) {
                        case right:
                            proximo += index;
                            break;
                        case left:
                            proximo = index - 1;
                            break;
                        case up:
                            proximo = index - totalColunas;
                            break;
                        case down:
                            proximo += index + (totalColunas -1);
                            break;
                    }
                }
                index++;
            });

            index = 1;
            // VERIFICA SE O RETORNO É MAIOR QUE O NUMERO TOTAL DE DIVS E RETORNA FALSO PARA A NAVEGACAO NÃO SAIR DE DAS DIVS
            if(proximo > $('.item').length) {
                return false;
            // VERIFICA SE O RETORNO É MENOR QUE 1 E RETORNA FALSO PARA A NAVEGAÇÃO NÃO SAIR DAS DIVS
            }else if(proximo < 1 ) {
                return false;
            }
            // PERCORRE TODAS AS DIVS ITEMS PARA ATRIBUIR A CLASSE SELECTED NA DIV QUE O CURSOR DEVE IR SETADO NA VARIAVEL PROXIMO
            $.each($('.item'), function () {
                $(this).removeClass('selected');
                if (index === proximo) {
                    $(this).addClass('selected');
                }
                index++;
            })
        }

    });
</script>
    
05.12.2017 / 17:59