jQuery UI の draggable, droppable, sortable を使って要素を移動＆並べ替え

drag_and_drop_and_sort.js

$('#keywords').droppable({
    accept : '.key',
    drop   : on_drop
});
$('#keywords').children().each( function () {
    $(this).draggable({
        snap   : true,
        revert : true
    });
});

$('#choose').droppable({
    accept : '.key',
    drop   : on_drop
});

function on_drop (e, ui) {
    var directory = $('#' + get_destination_id(e) );
    var files     = $('.ui-draggable-dragging');

    files.append(
        $('<a/>')
        .attr({
            class : 're',
            href  : 'javascript:void(0)'
        })
        .html('x')
        .click( function () {
            var keywords = $('#keywords');
            var parent   = $(this).parent();
            $(this).remove();
            parent.draggable('enable');
            parent.appendTo(keywords);
        })
    );

    files
	.appendTo(directory)
        .css('top', '0px')
        .css('left', '0px')
        .draggable({ disabled: true });
}
$('#choose').sortable();

function get_destination_id ( event ) {
    return event.target ? event.target.id
                        : event.srcElement.parentNode.id
                        ;
}

// HTML

<h6>好きなキーワードを下の赤枠にドラッグ＆ドロップ！</h6>
<ul class='container' id='keywords' style='border:1px solid blue; padding : 10px'>
   <li class='key'>ミンミンゼミ</li>
   <li class='key'>みみずく</li>
   <li class='key'>クリスマス</li>
   <li class='key'>ストロベリー</li>
   <li class='key'>リンダリンダ</li>
</ul>

<ul class='container' id='choose' style='border:1px solid red; padding :10px;'>
</ul>
<pre>
↑キーワードの後ろの「x」ボタンを押すと元に戻ります。
</pre>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js'></script>


// css

a { margin-left : 15px; }
pre { font-size: small; }