JSFiddle - React, Tailwind, and code Playground

by Shannenpio Cloning

HTML

<div>♜</div>
<div>♞</div>
<div>♝</div>
<div>♚</div>
<div>♛</div>
<div>♝</div>
<div>♞</div>
<div>♜</div>
<br>
<div>♟</div>
<div>♟</div>
<div>♟</div>
<div>♟</div>
<div>♟</div>
<div>♟</div>
<div>♟</div>
<div>♟</div>

CSS

body {
    /* http://lea.verou.me/2011/02/checkerboard-pattern-with-css3 */
    background-image:
      -moz-linear-gradient(45deg, #666 25%, transparent 25%), 
      -moz-linear-gradient(-45deg, #666 25%, transparent 25%),
      -moz-linear-gradient(45deg, transparent 75%, #666 75%),
      -moz-linear-gradient(-45deg, transparent 75%, #666 75%);
    background-image:
      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #666), color-stop(.25, transparent)), 
      -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #666), color-stop(.25, transparent)),
      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #666)),
      -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #666));

    -moz-background-size:100px 100px;
    background-size:100px 100px;
    -webkit-background-size:100px 101px; /* override value for shitty webkit */
    background-position:0 0, 50px 0, 50px -50px, 0px 50px;
}

div {
  cursor:move;
  float:left;
  font-size:50px;
  line-height:50px;
  width:50px;
  text-align:center;
  color:black;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -o-user-select:none;
  user-select:none;
}

.draggable {
  color:darkred;
}

br {clear:both;}

JavaScript

$(function() {
    $('body').on('mousedown', 'div', function() {
        $(this).addClass('draggable').parents().on('mousemove', function(e) {
            $('.draggable').offset({
                top: e.pageY - $('.draggable').outerHeight() / 2,
                left: e.pageX - $('.draggable').outerWidth() / 2
            }).on('mouseup', function() {
                $(this).removeClass('draggable');
            });
        });
        e.preventDefault();
    }).on('mouseup', function() {
        $('.draggable').removeClass('draggable');
    });
});