JqueryUI Selectable + Droppable

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Selectable + Droppable</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <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>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <style>
            #feedback { font-size: 1.4em; }
            #selectable .ui-selecting { background: #FECA40; }
            #selectable .ui-selected { background: #F39814; color: white; }
            #selectable { list-style-type: none; margin: 0; padding: 0; width: 770px; }
            .selectable { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
            ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
            li { margin: 5px; padding: 5px; width: 150px; }
            .dropped { font-size: 1em; }
        </style>
        <script>
            $(function() {
                $("#selectable").selectable({
                    stop: function() {
                        $(".ui-selected", this).each(function() {
                            $(this).addClass("droppable");
                        });
                    }
                });
                $(".draggable").draggable({
                    helper: "clone",
                    revert: "invalid"
                });
                $(".droppable").droppable({
                    accept: ".draggable",
                    activeClass: "ui-state-hover",
                    hoverClass: "ui-state-active",
                    drop: function(event, ui) {
                        $(this)
                                .addClass("ui-state-highlight dropped")
                                .find("p")
                                .html(ui.draggable.text());
                    }
                });
            });
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <ul>
                        <?php for ($i = 1; $i < 11; $i++): ?>
                            <li class="ui-state-default draggable">Item <?= $i ?></li>
                        <? endfor; ?>
                    </ul>
                </td>
                <td>
                    <ol id="selectable">
                        <?php for ($i = 1; $i < 32; $i++): ?>
                            <li class="ui-state-default selectable">
                                <?= $i ?><p></p>
                            </li>
                        <? endfor; ?>
                    </ol>
                </td>
            </tr>
        </table>
    </body>
</html>