Draggable DIV Boxes

Draggable <div> boxes using jquery

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<h2>Drag the Numbers</h2>
<div id="content"></div>

CSS

#content{
    margin:auto;
    width:250px;
}
.segment{
	width:80px;
	height:72px;
    margin:0px 6px 6px 0px;
    font-size:72px;
    padding:4px 0px;
    text-align:center;
    color:#fff;
    background:orange;
    border-radius:5px;
    cursor:pointer;
}

/*Other Styles*/
h2{
    text-align:center;
    font-family:'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
}

JavaScript

$(function () {
    $("#content").append("<table>");
    for (var i = 0; i < 9; i++) {
        if (i % 3 === 0) {
            $("#content").append("<tr>");
        } else if (i % 3 == 2) {
            $("#content").append("</tr>");
        }
        $("#content").append("<td><div class='segment'>"+(i+1)+"</div></td>");
    }
    $("#content").append("</table>");
});
$(function () {
    $(".segment").each(function () {
        $(this).draggable({
            scroll: true
        });
    });
});