JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gridcontainer">
		<div id="-2:-2" class="droppable occupied">
            <a href="" id ="508" class="bookmark draggable white" title="white" "target="_blank">1</a>
        </div>
        <div id="-2:-1" class="droppable">2</div>
        <div style="clear:both"></div>
        <div id="-2:0" class="droppable">3</div>
        <div id="-2:1" class="droppable occupied">
            <a href="" id ="567" class="bookmark draggable white" title="white" "target="_blank">4</a>
        </div>
        <div style="clear:both"></div>
</div>

CSS

#gridcontainer{position:relative;padding:25px;color:#ff0004;background:#ffffff;}
.droppable{width:65px; height:65px;float:left; margin:5px;background:#000000;}
.bookmark {float:left;width:65px; height:65px;display:block;position:absolute;}
.position{float:left;width:65px; height:65px;display:block;}
.position:hover{background-image:url(../img/tilehover.png);}
.bookmark.ui-draggable-dragging {-moz-box-shadow: 0 0 5px #d9d9d9; -webkit-box-shadow: 0 0 5px #d9d9d9; box-shadow: 0 0 5px #d9d9d9;}
.draggable{ background:#888888;}
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

JavaScript

$('.draggable').draggable({ start: function() {$('#dropdownAddTile').slideDown();},  stop: function() {$('#dropdownAddTile').slideUp();}, containment: '#container', snap:'.droppable', snapMode:'inner', revert:'invalid',snapTolerance: 32});
	$('.droppable').droppable({drop: handleDropEvent, accept: function(e){if(e.hasClass('draggable')) { if (!$(this).hasClass('occupied')) {return true; }}}});
	function handleDropEvent( event, ui ) {
		  event.preventDefault();
		  var draggable = ui.draggable;
		  var droppable = $(this);
		  var droppableId = $(this).attr("id");
		  var draggableId = ui.draggable.attr("id");
		  $('.draggable').draggable({containment: '#container', snap:'.droppable', snapMode:'inner', revert:'invalid',snapTolerance: 32});
		  $('.droppable').droppable({drop: handleDropEvent, accept: function(e){if(e.hasClass('draggable')) { if (!$(this).hasClass('occupied')) {return true; }}}});
		  var initPosit = ui.draggable.parent().attr('id');
		  //save new position
		  $.post("tiles/updateTilePosition", { draggableId:draggableId, droppableId: droppableId }).done(function(data) {
			 //alert(data);
		  })
		  $(this).addClass('occupied');
		  ui.draggable.parent().removeClass('occupied');
		  if($(ui.draggable).parent() !==$(this)){
				$(ui.draggable).appendTo($( this ));
		  }
	}