Prevent jquery draggable from jumping in resizable droppable

Question

Trying to drop a draggable onto a droppable that is also resizable. Everything worked fine until I added the resizable statement to the droppable. Now the draggable jumps on release. Is there some offset in the droppable that I need to account for?

$(document).ready(function () {

$("#droppable").resizable();

var x = null;

//Make element draggable
$(".drag").draggable({
    helper: 'clone',
    cursor: 'move',
    tolerance: 'fit'
});

        $("#droppable").droppable({

            drop: function (e, ui) {

                if ($(ui.draggable)[0].id != "") {
                    x = ui.helper.clone();
                ui.helper.remove();
                x.draggable({
                    helper: 'original',
                    containment: '#droppable',
                    tolerance: 'fit'
                });
                x.resizable({
                    minWidth: 50
                });
                x.appendTo('#droppable');
            }

            }
        });

});

jsfiddle example: http://jsfiddle.net/78aAf/2/

Answer 1

You need to set the css left/top as @czarchaic mentions, but rather than just setting to 0 you need to set to the drop position using ui.offset of the dropped element, and then take into account the offset of the drop zone, padding, margin and border widths.

x.draggable({
    helper: 'original',
    containment: '#droppable',
    tolerance: 'fit'
}).css({ top: ui.offset.top-6, left: ui.offset.left - 228});

http://jsfiddle.net/78aAf/7/

jQuery Droppable drop event