JQuery draggable and droppable append issue

Question

Я хочу перетащить div в раскрывающийся div и иметь divpable div ', который содержит его', в то время как начальный перетаскиваемый div по-прежнему перетаскивается внутри droppable.

Однако

Когда я перетащить перетаскиваемую DIV к Droppable DIV в DIV перетаскиваемом добавляется таким образом, чтобы визуально смещения.

Чтобы прорезать выше детский стишок и посмотреть, что я имею в виду на самом деле увидеть скрипку ниже и перетащите thing1 или thing2 в серой палитре.

Это смещение направо.

http://jsfiddle.net/mnmyS/

Я хочу знать, как исправить это.

$(".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

Перед этим я столкнулся с этой проблемой. После многих усилий я нашел решение для меня. Я просто удалил перетаскиваемый элемент, когда он упал, и снова создал один и тот же элемент внутри элемента droppable. Я знаю, что это не ваше решение. Но может быть, это может вам помочь. 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' 
       }); 
     }});