jQuery UIのドラッグ可能な要素がソート可能にドロップされました

Question

ドラッグ可能なアイテムのリストがあり、ソート可能なコンテンツブロックにドラッグできるようにしたいと考えています。

<div class='items'> 
    <div class="one">One</div> 
    <div class="two">Two</div> 
</div> 

<div class="content"> 
    <div class="block">Foo</div> 
    <div class="block">Bar</div> 
</div> 

事があり、私がしたいことをドラッグしたアイテムは、すぐにドラッグを開始したとしてブロック「になる」と、それをドロップだときのブロックのままに：ここに私のマークアップです。私はこれを試してみました：

$('.items div').draggable({ 
    helper: function(e) { 
     return $('<div>').addClass('block').text($(e.target).text()); 
    }, 
    connectToSortable: ".content" 
}); 

$('.content').sortable();​ 

フィドル：http://jsfiddle.net/MF4qu/

しかし、私はブロックのように見える独自のヘルパーを作成する場合でも、それは、すぐにそれが落ちだとして、元のドラッグされた要素に戻ります。私のサンプルページにブロックを正しく挿入する方法を誰かが知っていますか？私は既にUI APIを見てきましたが、わかりません。ドラッグ可能な要素をソート可能にドロップすると

​ 

Answer 1

、それはソート可能updateイベントをトリガします。一つの解決策は、そのイベントに耳を傾け、そしてブロックに落とし込ん項目を有効にすることです：

$('.items div').draggable({ 
    helper: function(e) { 
     return $('<div>').addClass('block').text($(e.target).text()); 
    }, 
    connectToSortable: ".content" 
}); 

$('.content').sortable({ 
    update: function (event, ui) { 
     ui.item.addClass('block'); 
    } 
});​ 

の作業のデモ：ドラッグイベントhttp://jsfiddle.net/DaXuT/1/