JSFiddle - React, Tailwind, and code Playground

by OwenMelbz

HTML

<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<div id="canvas-wrap">
<div id="canvas"></div>
</div>

CSS

#canvas-wrap {width: 1440px; height: 900px;}
#canvas {width: 100px; height: 100px;border:1px solid black}
#canvas div {float: left;width: 147px; height: 147px; margin: 2px; border:1px solid black;}

JavaScript

$(document).ready(function(){
    
var i=0;
var count = 0;
    while (i < 190){
        $('#canvas').prepend('<div></div>');
        i++;
    }
    $('#canvas div').each(function(){
      count++; 
    });
    var blockwidth = $('#canvas div').width();
    var width = ($('#canvas div').width()+3) * count;
    width = width/5;
    //alert('canvas width:'+width+'');
    $('#canvas, #canvas-wrap').css({width: width, height: width});
    
    $.scrollTo(width/4, 0, { axis:'x' });
    $.scrollTo(blockwidth*2, 0, { axis:'y' });
    $('#debug').text(width);
    
    $( "#canvas" ).draggable({handle:'#canvas div', distance: 30, contstraint:'parent', cursor: 'crosshair'}
    });  

var canvas = $('#canvas');
var posx = canvas.position.left; 
var posy = canvas.position.top;

});