jquery - jQuery - ドラッグ可能なアイテムの HTML スタイルのバグ + 元のコンテナーに戻す

Question

したい：

• ドラッグ可能な要素をコンテナーにドロップします。
• ドロップ時に要素の html を変更します。
• ドロップされた要素がコンテナの外にドラッグされると、元の位置に戻り、さらに古い html に戻ります。

私の現在の問題

• ドラッグ可能な要素がコンテナーにホバリングしている間、既にスタイルが変更されています。
• 「ドロップした要素を元の位置に戻す」方法がわかりません (ポイント 3 @「したい」)

JSFiddle

http://jsfiddle.net/27Hqj/1/

HTML

<div class="draggable-items">
    <div class="main-groups">Item 1</div>
    <div class="main-groups">Item 2</div>
    <div class="main-groups">Item 3</div>
    <div class="main-groups">Item 4</div>
</div>
<div id="container"></div>

jQuery

$(function() {
    $( ".main-groups" ).draggable({
        connectToSortable: "#container",
        helper: "original",
        revert: "invalid"
    });

    $( "#container" ).sortable({
        revert: true,
        receive: function(event, ui) {
            var html = [];
            $(this).find('.main-groups').each(function() {
                html.push('<div class="main-groups"><b><a href="#'+$(this).attr("id")+'">'+$(this).html()+'</a></b></div>');
            });
            $(this).find('.main-groups').replaceWith(html.join(''));
        }
    });
});