JSFiddle - React, Tailwind, and code Playground

by António Almeida

HTML

<div class="snap-box">snap box</div>

CSS

.grid {
        margin: 0px auto auto;
        border: 1px solid #000;
        border-width: 0 1px 1px 0;
        background-color: #CCC;
      }

      .grid div {
        border: 1px solid #000;
        border-width: 1px 0 0 1px;
        float: left;
}

.snap-box {
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 10;
    cursor: pointer;
    
    border: 1px solid #CCC;
    background-color: rgba(0,0,0,0.8);
    color: #FFF;
    text-align: center;
}

JavaScript

function creategrid(size){
  
              var standardW = Math.floor((500) / size),
                  standardH = Math.floor((500) / size);

              var standard = document.createElement('div');
                  standard.className = 'grid';
                  standard.style.width = (standardW * size) + 'px';
                  standard.style.height = (standardH * size) + 'px';

                for (var i = 0; i < standardH; i++) {
                    for (var p = 0; p < standardW; p++) {
                      var cell = document.createElement('div');
                          cell.style.height = (size - 1) + 'px';
                          cell.style.width = (size - 1) + 'px';
                          cell.style.position = 'relative'
                          cell.style.zIndex= '2';
                standard.appendChild(cell);
                    }
                }

              document.body.appendChild(standard);
          }

          creategrid(10);

// jQuery 
$( ".snap-box" ).draggable({ grid: [ 10,10 ] });