Test Case Boilerplate

Fork this way...

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<div id="container">
    <div class="square empty"></div>
    <div class="square color"></div>
</div>

CSS

body {
    background: #222;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}
#container {
    display: table;
    margin: 0 auto;
}
.square {
    background: #aaa;
    height: 32px;
    width: 32px;
}
.empty {
    margin: 12px;
}
.empty.hover {
    background: #fff;
}
.color {
    background: #269;
    margin: 12px;
}

JavaScript

$(document).ready(function(){
    $('.color').draggable();
    $('.empty').droppable({
        hoverClass: "hover",
        drop: function(event, ui){
            alert('Dropped in a droppable region.');
        }
    });
});