Puzzle site

by Alin Guta

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div id="shell">
    <div class="puzzle">10</div>
    <div class="puzzle">1</div>
    <div class="puzzle">4</div>
    <div class="puzzle">7</div>
    <div class="puzzle">11</div>
    <div class="puzzle">2</div>
    <div class="puzzle">5</div>
    <div class="puzzle">8</div>
    <div class="puzzle">12</div>
    <div class="puzzle">6</div>
    <div class="puzzle">9</div>
    <div class="puzzle">3</div>
</div>

CSS

#shell {
    width:560px;
    height:420px;
    margin:0 auto;
}
.puzzle {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: #ebebeb;
    color: black;
    position: relative;
    float:left;
    margin:20px;
}

JavaScript

$(document).ready(function () {
    $('#shell').sortable({cursor: "move"});

});