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();

    }
});

Answer 2

I believe the easiest would be to reset the positioning with CSS on .drop().

ui.draggable.css({ left: 0, top: 0 }).appendTo(this);

That will at least solve your problem.

NOTE: ui.draggable - current draggable element, a jQuery object.

DEMO: http://jsfiddle.net/tive/mJkd5/

The reason why jQuery UI adds css properties top and left to the dragged element is only for visual feedback. You can test this in your solution by adding the following CSS:

td img.no_clone_item {
    left: auto !important;
    top: auto !important;
}

With this CSS enabled, you don't have visual feedback. Only on drop the item will visually move.

When .draggable() receives a clone element, the position is added to the cloned element for visual feedback.