jquery - jQueryのドロップ可能なホバーイベントが最初の試行で発生しない

Question

ドロップ可能な領域が最初の試行でドラッグ可能なアイテムを受け入れないという問題があります。その後の試みはうまくいくようです。

このコードを参照してください - http://jsfiddle.net/grimmus/Pp9Qf/

//binding droppable property to generated columns
$("#contents").delegate('li', 'mouseover', function () {
    $(this).droppable({
        activeClass: "ui-state-active",
        hoverClass: "ui-state-hover",
        accept: ".ui-draggable",
        drop: function (event, ui) {
            $("<span></span>").text(ui.draggable.text()).appendTo(this);
        }
    });
});

パネルを作成するには、右側の領域のドロップダウンから番号を選択し、[追加] を押します。

作成されたパネル内のボックスはすべてドロップ可能です。次に、[モデルの選択] ドロップダウンから従業員を選択します。

許容可能なドラッグ項目がその上に置かれると、ドロップ可能な領域に破線の境界線が表示されます。これは、私が初めて試したときに起こらないようです。アイテムを再度ドラッグすると、ホバー クラスが表示され、アイテムが受け入れられます。

何がうまくいかないのでしょうか？何かが正しく初期化されていないようです

Chrome と Firefox でテスト済み。

ありがとう