Move by Divs via keyboard arrows

Question

A while ago I came across a plugin in jQuery in which I could move through Divs, menus, images... using the arrow keys on the keyboard.

I’ve searched a lot but I can’t find anything.

Someone there knows this or some plugin that does this work, or has some logic of how to do this?

Answer 1

You can work with a class for Divs and Keycodes intercepting the event keyup in javascript would look 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: auto auto auto auto auto auto auto;
        height: 500px;
        width: 80%;
        margin: 100px auto 0;
        /*background: #e3e3e3;*/
        grid-auto-rows: auto auto auto;
        grid-gap: 2em;
    }

    .item {
        border: 2px solid black;
    }

    
    .selected {
        background: grey;
    }

</style>

<div class="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>