JSFiddle - React, Tailwind, and code Playground

by muztv

JavaScript

$(function(){
  var svg = '<svg id="svg" width="1000" height="1000">',
    x = 0,
    y = 0;
  for(var i = 0; i < 100; i++){
    svg += '<g transform="translate(' + x + ',' + y + ')" style="fill: none; fill-rule: evenodd; stroke: none; stroke-width: 1;"><rect rx="4" height="40" width="40" y="4" x="4" style="stroke: rgb(179, 185, 189);"></rect><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/Calendar.svg" x="13" y="12" height="24px" width="24px"></image><circle r="3" cy="14" cx="4" style="fill: rgb(255, 255, 255); stroke: rgb(179, 185, 189);"></circle><circle r="3" cy="22" cx="4" style="fill: rgb(255, 255, 255); stroke: rgb(179, 185, 189);"></circle><circle r="3" cy="24" cx="44" style="fill: rgb(255, 255, 255); stroke: rgb(179, 185, 189);"></circle></g>';
    x += 100;
    if(x > 900){
      x = 0;
      y += 100;
    }
  }
  svg += '</svg>';
  var $body = $('body');
  $('body').append(svg);

  var $svg = $('#svg'),
    $dragable = null;
  $svg.on('mousedown', 'rect', function(e){
    $dragable = $(e.target);
  });
  $body.on('mouseup', function(e){
    $dragable = null;
  });
  $('body').on('mousemove', function(e){
    if(!$dragable){
      return;
    }
    $dragable.attr({
    	transform: 'translate(' + (e.pageX - 25) + ',' + (e.pageY - 25) + ')'
    });
  });
});