Drag'n'drop re-arrange boxes

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/flick/jquery-ui.css">
<table class="droppables"></table>
<div class="draggables"></div>
<div class="results"></div>

CSS

.ui-widget-content { width: 100px; height: 100px; padding: 0.0em; float: right; margin: 10px 10px 10px 0; clear : left;}
.ui-widget.header { width: 100px; height: 100px; padding: 0.0em; float: left; margin: 0px; }
ui-widget-content img { height:100px; width:100px; }
div.draggables { clear: both; }
table.droppable {
    border: 0; 
    z-index: 1; 
    left: 653px; 
    top: 11px; 
    position: reletive; 
    height: 556px; 
    width: 120px; }
table.droppable td { padding: 1px; border-spacing: 1px; }
h3 { clear: left; }
.results { 
    position:absolute; 
    top: 400px; 
    left:0;
    color: Red; }

JavaScript

var draggables = [
    { id: 1, src: "images/server1.jpg" },
    { id: 2, src: "images/server2.jpg" },
    { id: 3, src: "images/server3.jpg" },
    { id: 4, src: "images/server4.jpg" }
];

var droppables = [
    { id: 1, text: "Drop here 1" },
    { id: 2, text: "Drop here 2" },
    { id: 3, text: "Drop here 3" },
    { id: 4, text: "Drop here 4" }
];

$(function () {
    //cached vars. for performance purposes
    var $draggables = $("div.draggables");
    var $droppables = $("table.droppables");

    //create draggables from array
    $.each(draggables, function () {
        var $divG = $("<div>", { "data-id": this.id, "class": "ui-widget-content" });
        var $draggable = $divG.append($("<p>", { text: this.id }).append($("<img>", { src: this.src })));
        $draggable.appendTo($draggables).draggable({ revert: "invalid" });

    });

    //create droppables from array
    $.each(droppables, function () {
        var $droppable = $("<div>", { "data-id": this.id, "class": "ui-widget-header" }).append($("<p>", { text: this.text }));
        $("<tr>").append($("<td>").append($droppable)).appendTo($droppables);
        $droppable.droppable({
            tolerance: "pointer",
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            drop: function (event, ui) {
                $(".results").html($(ui.draggable[0]).data("id") + " dropped onto " + $(this).data("id"));
                $(this).droppable("option", "tolerance", "touch"); //to detect when removing
                //$(ui.draggable).draggable('option', 'disabled', false);
                //$(this).droppable("disable");
                $(this).addClass("ui-state-highlight").find("p").html("arranged");
            },
            out: function (ev, ui) {
                $(".results").html("Droppable " + $(this).data("id") + " is OUT");
                $(this).droppable("enable");
            }
        });
    });
});