JQuery draggable and droppable append issue

Question

I want to drag a div to a droppable div and have the droppable div 'contain it' while the initial draggable div is still draggable within the droppable.

However,

When I drag the draggable div to the droppable div the draggable div is appended in a manner that is visually offset.

To cut through the above nursery rhyme and see what I actually mean see the fiddle below and drag thing1 or thing2 to the gray palette.

It offsets to the right.

http://jsfiddle.net/mnmyS/

I want to know how to fix that.

$(".card").draggable();

$('.box').draggable().resizable();



$(".pallette").droppable({
    tolerance: "intersect",
    accept: ".card",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        $(this).append($(ui.draggable));
        $(".card").draggable({containment: $(this)});
    }
});

Answer 1

I was facing this issue before some day. After a lot of effort I found a solution for me. I simply removed the draggable element when it dropped and again created a same element inside the droppable element. I know its not your solution. But may be this can help you. http://jsfiddle.net/D3cxz/

var div = document.createElement("div");
div.style.width = "30%";
div.style.height = "10%";
div.className = "card";
div.id = "draggable";
div.innerHTML = "thing1";
div.style.fontSize="small";

    document.body.appendChild(div);
    $('.card').draggable();

    var box = document.createElement("div");
    box.className = "box";

    document.body.appendChild(box); 
    $('.box').draggable();

    var pallette = document.createElement("div");
    pallette.className = "pallette";

    box.appendChild(pallette);


    $('.pallette').droppable({
         drop: function (event, ui) {
        div.parentElement.removeChild(div);

           var div1 = document.createElement("div");
        div1.style.width = "30%";
        div1.style.height = "10%";
        div1.className = "card";
        div1.id = "draggable";
        div1.innerHTML = "thing1";
        div1.style.fontSize="small";
              pallette.appendChild(div1);

             $('.card').draggable(
                 {
                     containment: '.pallette'
                 });
         }});