Jquery sürüklenebilir yeni konteynere takın

Question

Kullanıcıların dropbox'tan final_dest'e sürükleyebileceği bir ebeveyn div içinde div var. Kullanıcılar ayrıca bir buton tıklamasıyla yeni öğeler oluşturabilir. Düğme tıklaması yeni div kutusunu dropbox'a ekler. Bir kullanıcı başka bir kaba ITEM_1 sürükler Eğer

<div id='#dropbox'> 
     <div id='item_1'>Some Item</div> 
</div> 

<div id='final_dest'></div> 

, nasıl dropbox'a çıkarın ve final_dest koyabilirsiniz?

  $('#item_'+a).draggable({ // make this whole damn thing draggable 
        drag:function(event){ 
          helper:"clone", 
          jsPlumb.repaintEverything(); 
        }, 
        stop:function(event,ui){ 
            $('this').detach('#dropbox'); 
            $('this').append('final_dest'); 

        } 

      }); 

ben ayırmak kullanarak denedi ama dropbox div çıkarmak için nasıl anlamaya olamaz.

Sorun, bir kullanıcının item_1 öğesini final_dest öğesine sürüklemesi ve ardından yeni bir item_2 div oluşturması durumunda, drop penceresindeki item_1 alanının altında görünür. item_1'ın gösterdiği yerde görünmeye çalışıyorum. Bunu yapar, çünkü item_1 dropbox'tan kaldırılmaz.

Answer 1

Sen, kökeni ve hedef elemanlarını toplamak durumda ayırma, set css çağırmak ve böylece gibi kaplara bağlanmış damla etkinliğine append aramak gerekir:

$(".droppable").droppable({ 
    accept: ".draggable", drop: function (event, ui) { 
     var dropped = ui.draggable; 
     var droppedOn = $(this); 
     $(dropped).detach().css({ top: 0, left: 0 }).appendTo(droppedOn); 
    } 
}); 

Full çalışma örneği sizin için burada bulabilirsiniz: daha fazla ayrıntı vermek gerekir

https://jsfiddle.net/gdkx7861/1/