I have a list of draggable items, and I wish to be able to drag them onto a sortable content block. Here’s my markup:
<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>
The thing is, that I want the dragged item to "become" a block as soon as the dragging starts and remain a block when it’s dropped. I have tried this:
$('.items div').draggable({
helper: function(e) {
return $('<div>').addClass('block').text( $(e.target).text() );
},
connectToSortable: ".content"
});
$('.content').sortable();
Fiddle: http://jsfiddle.net/MF4qu/
But even if I create a custom helper that looks like a block, it reverts back to the original dragged element as soon as it’s dropped. Does anyone know how to properly insert a block in my example page? I already looked through the UI API but I can’t figure it out.