JSFiddle - React, Tailwind, and code Playground

by matt9388

HTML

<div class="block a" id="a"></div>
<div class="block b" id="b"></div>

CSS

.block
{
    background-color:blue; height: 100px; width:100px;
    position:absolute;
}
.a{background-color:green; top: 150px; left: 200px;}

JavaScript

$(function()
  {
      $(".block").draggable(
      {
          stop: function(event, ui)
          {
              $(this).css({position: "absolute"});
          }
      });
      
      $(".block").on("drag",function()
      {
         var hasCollided = collision(this, ".block");          
         if(hasCollided){return false;}    
      });
  });
  
  function collision(obj, collideObj)
	{
		var collidedElements = new Object();
		var collided = false;
		
		$(obj).each(function(){
		var player = $(this);
        var playerWidth = $(this).width();
        var playerHeight = $(this).height();
		var playerPosition = player.offset();
		var playerLeft = playerPosition.left;
		var playerRight = playerLeft + player.width();
		var playerTop = playerPosition.top;
		var playerBottom = playerTop + player.height();
		
		collidedElements.first = player;
		
		$(collideObj).not(obj).each(function()
		{
			var block = $(this);
			var blockPosition = block.offset();
			var blockLeft = blockPosition.left;
			var blockRight = blockLeft + block.width();
			var blockTop = blockPosition.top;
			var blockBottom = blockTop + block.height();
			
			if(	playerLeft < blockRight -1 &&
				playerLeft > blockLeft &&
				playerBottom > blockTop +10 &&
				playerTop < blockBottom -10)
				{
					// alert('Collision on left side'); // Debug Code //
					/*block.removeClass("block");
					block.toggle("explode", 0);*/            
                    $(player).css({position:"absolute",left: blockRight +1});
					collided = true;
					collidedElements.second = $(this);
                    return true;
				}
			if(	playerRight > blockLeft  &&
				playerRight < blockRight + 1 &&
				playerBottom > blockTop + 10 &&
				playerTop < blockBottom - 10)
				{
					//alert("Collision on right side"); // Debug Code //
					/*block.removeClass("block");
					block.toggle("explode", 0);*/
					$(player).css({position:"absolute",left: blockLeft - (playerWidth +1)});
					collided =...