JSFiddle - React, Tailwind, and code Playground

by blparker

HTML

<div class="cont">
    <video controls>
        <source />
    </video>
    <div class="grid"></div>
    <div class="control">Stuff</div>
</div>

CSS

video { background: #000; height: 300px; }
.cont {
    position: relative;
}
.grid {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
}
.grid .el {
    position: absolute;
    
    top: 0;
    
}
.grid .el.w {
    width: 1px;
    border-left: 1px solid #222;
}
.grid .el.h {
    height: 1px;
    border-bottom: 1px solid #222;
}
.control {
    position: absolute;
    left: 0; top: 0;
    background: blue;
}

JavaScript

var $grid = $('.grid');
var $ge = $('<div />').addClass('el');

var $vid = $('video');
var width = $vid.width();
var height = $vid.height();

$grid.height(height).width(width);

// Setup width grids
var iw = 9;
while ((width % ++iw) !== 0);
var glw = width / iw;

for (var j = 0; j < glw; j++) {
    var $gl = $ge.clone();
    $grid.append($gl);
    $gl.addClass('w');
    $gl.height(height);
    $gl.css('left', iw * j);
}

// Setup height grids
var ih = 9;
while ((height % ++ih) !== 0);
var glh = height / ih;
console.log(ih, glh);

for (var j = 0; j < glh; j++) {
    var $gl = $ge.clone();
    $grid.append($gl);
    $gl.addClass('h');
    $gl.width(width);
    $gl.css('top', ih * j);
}


var flag = false;
$('.control').draggable({
    containment : 'parent',
    grid : [ iw, ih ],
    stop : function(e, ui) {
        //console.log($(this).data('draggable').snapElements);
        console.log($(this).data('ui-draggable'));
        console.log($(this).data('ui-draggable').snapElements);
    }
});