Draggable, Droppable, Sortable

Draggable, Droppable, Sortable

Everything is working except sortable. Tips?

<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #000;
    font-size: 92%;
    font-family: helvetica, sans-serif;
}

#widgets {
    margin: 1.0em;
    padding: 1.0em;
    border: 1px dotted #0cc;
}

.widgets-header {
    margin: 0;
    padding: 0.2em 0.4em;
    background-color: #e1e1e1;
    border-width: 1px;
    border-style: solid;
    border-color: #a1a1a1;
}

#widgets-list {
    margin: 0;
    padding: 0;
    border-width: 0 1px 1px;
    border-style: solid;
    border-color: #a1a1a1;
}

.widget {
    margin: 0 0 0.6em;
    padding: 0.8em 1.6em;
    border: 1px solid #333;
    width: 200px;
}

.widget h3 {
    margin: 0;
    padding: 0;
}

#page-layout {
    margin: 1.0em;
    padding: 1.0em;
    border: 1px dotted #c00;
}

#left-column, #right-column {
    margin: 0;
    padding: 0;
    width: 400px;
    float: left;
    border: 1px solid #00c;
    min-height: 300px;
}

.moved .left {
    display: none;
}

.moved .right {
    display: block;
}

.moving {
    background-color: #ff3;
}

input, label {
    display: block;
}
</style>
<script type="text/javascript">
$(function() {
    var $widgets = $('#widgets'), $lc = $('#left-column');
    $('.widget',$widgets).draggable({
        appendTo: 'body'
        , helper: 'clone'
        , cursor: 'move'
    });
   
    $('#page-layout div').droppable({
        accept: '#widgets .widget'
        , activeClass: 'moved'
        , hoverClass: 'moving'
        , drop: function(ev, ui) {
            $(this).find('.placeholder').remove();
            dropElement(ui.draggable);
        }
    });
   
    function dropElement($item) {       
        var $list = $('ul', $lc).length ? $('ul', $lc) : $('<ul class="sortable"/>').appendTo($lc);
        $item.appendTo($list);
        $item.wrap('<li></li>');
        $item.find('h3').hide();
        $item.find('.right').show();
        $list.sortable();
    }
});
</head>
<body>

<div id="container">
    <div id="widgets">
        <h2 class="widgets-header">Widgets</h2>
        <div id="widgets-list">
            <div class="widget">
                <h3 class="left">Text Information</h3>
                <div class="right" style="display: none;">
                    <label for="ttr_text">Text:</label>
                    <textarea id="ttr_text" name="ttr_text" rows="5" cols="30"></textarea>
                </div>
            </div>
            <div class="widget">
                <h3 class="left">Generic Form</h3>
                <div id="widgets-form-generic-right" class="right" style="display: none;">
                    <label for="txt_fname">First Name:</label>
                    <input type="text" id="txt_fname" name="txt_fname" value="" disabled="disabled" />
                    <label for="txt_lname">Last Name:</label>
                    <input type="text" id="txt_lname" name="txt_lname" value="" disabled="disabled" />
                    <label for="txt_email">Email:</label>
                    <input type="text" id="txt_email" name="txt_email" value="" disabled="disabled" />
                    <label for="ttr_comments">Comments:</label>
                    <textarea id="ttr_comments" name="ttr_comments" rows="5" cols="30" disabled="disabled"></textarea>
                    <input type="submit" id="btn_submit" name="btn_submit" value="Send Information" disabled="disabled" />
                </div>
            </div>
        </div>   
    </div>
   
    <div id="page-layout">
        <div id="left-column">
            <p class="placeholder">left</p>
        </div>
        <!--<div id="right-column">right</div>-->
    </div>
</div>