JSFiddle - React, Tailwind, and code Playground

by andrewwhitaker

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.7/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/blitzer/jquery-ui.css">
<div class="draggable">
</div>
<div class="bar">
    <div class="item">
    </div>
    <div class="item">
    </div>
</div>

CSS

.bar { 
    background-color: green; 
    width: 250px;
    height:150px;
    padding:25px;
    
}
.item { 
    background-color: white; 
    width: 104px;
    height: 104px;
    float:left;
    border: 1px solid black;
}

.draggable {
    background-color: yellow;
    width: 65px;
    height: 75px;
}

JavaScript

$(function() {
    $(".draggable").draggable();
    $(".item").droppable({
        drop: function(event, ui) {
            var $this = $(this);
            $this.append(ui.draggable);    
            
            var width = $this.width();
            var height = $this.height();
            var cntrLeft = (width / 2) - (ui.draggable.width() / 2);
            var cntrTop = (height / 2) - (ui.draggable.height() / 2);
            
            ui.draggable.css({
                left: cntrLeft + "px",
                top: cntrTop + "px"
            });
        }
    });
});