Two different behaviors with Draggable UI helper clone and non-clone, what's going on?

Question

From my understanding the helper option with Draggable UI is only a display effect as described here.

But when using it with tables it appears to be bugged (append position is wrong).

Example: http://jsfiddle.net/hmj83/

$(".no_clone_item").draggable({
    revert: 'invalid'
});

$(".clone_item").draggable({
    helper: 'clone',
    revert: 'invalid'
});

$("td").droppable({
    drop: function (event, ui) {
        $(ui.draggable).appendTo(this);
    }
});

Can anyone explain this behavior or give a workaround/ fix?

Thanks.

Answer 1

Tim's suggested solution worked but I lost some functionality when implemented into my application.

Instead I kept the helper clone and just hid the original while dragging and redisplayed it when the dragging stopped.

draggable({
    start: function(event, ui) {
        $(this).hide();
    },
    stop: function(event, ui) {
        $(this).show();

    }
});