jQuery UI draggable not cloning

jQuery UI draggable not cloning

I have the following elements:
<div style="height: 25%">
<div id="e1" class="oneEigth insertionBlock insertion ui-draggable"
accountname="1 of a Find" premiumtitle="Page 1 of 2" data-id="2.000H"
insertion-id="1390"> </div>
<div id="e2" class="oneEigth insertionBlock insertion ui-draggable"
accountname="1 of a Find" premiumtitle="Page 1 of 2" data-id="2.000H"
insertion-id="1390"> </div>
</div>
I loop through the elements with the insertionBlock class and bind this
draggable:
$(this).draggable({
helper: 'clone',
containment:"document",
start: function() {
var $possibleThisBlockPaginationPage, thisBlockInsertionId;
thisBlockInsertionId = $(this).attr("insertion-id");
$(this).addClass('standalone placeholder');
$(this).removeClass('oneThird oneEigth oneSixth eHoveredOver
insertionBlock oHoveredOver xHoveredOver');
$(this).attr("id", thisBlockInsertionId);
$(this).removeAttr("insertion-id");
$possibleThisBlockPaginationPage =
$(this).parent().parent().parent();
if
($possibleThisBlockPaginationPage.parent().hasClass('paginationPage'))
{
$possibleThisBlockPaginationPage.find(".insertionBlock").each(function()
{
if ($(this).attr("insertion-id") === thisBlockInsertionId) {
$(this).removeClass("insertion");
$(this).removeAttr("accountname");
$(this).removeAttr("premiumtitle");
$(this).removeAttr("data-id");
$(this).removeAttr("insertion-id");
}
});
}
}
});
And I have the following droppable:
$("#paginationScratch").droppable({
drop: function( event, ui ) {
var thisInsertion = ui.draggable.detach(), $scratchPad =
$("#paginationScratch");
$scratchPad.append(thisInsertion);
}
});
The insertionBlock elements drag and drop just fine, but the problem is
that the source ends up looking like this:
<div style="height: 25%">
<div id="e2" class="oneEigth insertionBlock ui-draggable"> </div>
</div>
When it SHOULD look like this:
<div style="height: 25%">
<div id="e1" class="oneEigth insertionBlock ui-draggable"> </div>
<div id="e2" class="oneEigth insertionBlock ui-draggable"> </div>
</div>
So basically, the element I drag:
<div id="e1" ... >
Is detached from the source and appended to the destination, when it
should be cloned from the source and appended to the destination. Note
that all of the other transformations, such as the removal of classes,
etc, are required.
How am I screwing this up? I've been stuck on this for quite a while.