jquery - JQuery UI: 絶対 DIV ドラッグ可能の基礎となるソート可能な要素

Question

私はコードを持っています:

<div class="content">
    <div id="sortable">
        <div class="guide">Element 1</div>
        <div class="guide">Element 2</div>
    </div>
</div>


<div class="overlay" style="position: absolute; display:block;">
</div>

私はスクリプトを持っています：

$('#sortable').sortable({
    revert: true
});

$( ".guide" ).live({
    mouseover: function(event)
    {
        event.preventDefault();

        var item = $(this);

        var width = item.outerWidth();
        var height = item.outerHeight();

        var posTop = item.position().top + ((item.outerHeight(true) - item.outerHeight()) / 2);
        var posLeft = item.position().left + ((item.outerWidth(true) - item.outerWidth()) / 2);


        $('.overlay').css({left: posLeft, top: posTop, width: width, height: height});
    }
});

つまり、並べ替え可能な DIV がありますが、アイテムをマウスオーバー イベントでオーバーライドする絶対 DIV があります。しかし、基になる要素を並べ替えることができなくなりました。

技術的な理由から、これを DIV 要素に含める必要があります。私はjsFiddleで例を作りました:

http://jsfiddle.net/roneioliveira/NPdnv/4/