JSFiddle - React, Tailwind, and code Playground

by Alain Dumesny

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<box id="box1">
  <div id="drag"></div>
</box>
<box id="box2"></box>

<div id="result"></div>
<div id="log"></div>

CSS

box {
  float: left;
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 20px;
}

#log {
  position: absolute;
  top: 150px;
}

.green {
  background-color: green;
}

#drag {
  width: 50px;
  height: 50px;
  float: left;
  background-color: blue;
}

#drag.absolute {
  position: absolute;
}

html,
body {
  width: 100%;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
}

JavaScript

$("box").mouseover(function() {
        $(this).addClass("green");
        var box = $(this).attr("id");
        $("#result").html(box);
      });
      
      /*
      	Solution
      */
      $("box").mousedown(function(e) {
				// Booooom! This should stop the undesired default beahvior.
        // e.preventDefault();
      });

      $("box").mouseleave(function() {
        $(this).removeClass("green");
      });

      $("#drag").bind({
        mousedown: function() {
          $(this).addClass("absolute");
        },
        mouseup: function() {
          $(this).removeClass("absolute");
        },
        mousemove: function(e) {
          $(this).css({
            left: e.pageX - (50 / 2),
            top: e.pageY - (50 / 2)
          });
        }
      });

      $("body").mousemove(function(event) {
        $("#log").text("pageX: " + event.pageX + ", pageY: " + event.pageY);
      });