jQuery UI przeciągnięty element upuszczony do sortowalnej

Question

Mam listę przeciągalnych elementów, a ja chciałbym móc przeciągnąć je na sortowalny blok zawartości. Tu jest mój znaczników:

<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> 

Chodzi o to, że chcę przeciągany element, aby „stać się” wybić jak najszybciej rozpoczęciem przeciągania i pozostają w bloku, kiedy to spadła. Próbowałem to:

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

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

Fiddle: http://jsfiddle.net/MF4qu/

Ale nawet jeśli utworzyć niestandardową pomocnika, który wygląda jak blok, to powraca do pierwotnego przeciągnięty elementu tak szybko, jak to jest odrzucany. Czy ktoś wie, jak poprawnie wstawić blok na mojej przykładowej stronie? Przeglądałem już interfejs API interfejsu użytkownika, ale nie mogę go rozwiązać.

​ 

Answer 1

Gdy element przyciągany jest spadła do sortable, to wyzwala sortable update wydarzenie. Jednym z rozwiązań jest, aby słuchać tego zdarzenia, a następnie włącz upuszczony przedmiot w bloku:

$('.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'); 
    } 
});​ 

demo robocza:http://jsfiddle.net/DaXuT/1/