JSFiddle - React, Tailwind, and code Playground

by mkdizajn

HTML

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

CSS

div {
  width:50px;
  height:50px;
  float:left;
  border:1px solid black;
}

JavaScript

mouseDown = null;
from = null;
$("div").each(function (i) {
  $(this).attr("data-id",i);
});
$("div").on("mousedown", function () {
  mouseDown = $(this).attr("data-id");
}).on("mousemove", function () {
  if (mouseDown) {
    mouseUp = $(this).attr("data-id");
    $("div").each(function (i) {
      if (i >= mouseDown && i <= mouseUp) {
        $(this).css("background","red");
      }
    });
  }
}).on("mouseup", function (){
  mouseDown = null;
});