How to drop elements to a dynamically generated DIV, Drag function is working Fine

Question

Here is the jQuery code I'm using:

jQuery(function() {
jQuery(".component").draggable({
    //  use a helper-clone that is append to 'body' so is not 'contained' by a pane
    helper: function() {
        return jQuery(this).clone().appendTo('body').css({
            'zIndex': 5
        });
    },
    cursor: 'move',
    containment: "document"

});

jQuery('.drag-drop-box').droppable({
    accept: '.component',
    drop: function(event, ui) {
        if (!ui.draggable.hasClass("dropped"))
            jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
        }
    });
});

This code works fine on a pre-loaded div. But I am creating divs dynamically how can i get it working for a dynamically generated div.

This is HTML code f the static code where dropping elements is working well

<div class="item-box">
                        <div id="tabs-1">
                            <div class="drag-drop-box"> </div>
                        </div>
                    </div>

And here is the jQuery code that's creating divs dynamically:

 function addTab() {
  var label = tabTitle.val() || "Tab " + tabCounter,
    id = "tabs-" + tabCounter,
    li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label) ),
    tabContentHtml = tabContent.val();// || "Tab " + tabCounter + " content.";

  tabs.find( ".ui-tabs-nav" ).append( li );
  tabs.append( "<div id='" + id + "'><div class='drag-drop-box'></div></div>" );
  tabs.tabs( "refresh" );
  tabCounter++;
}

Answer 1

I think you need to make the dynamically created div droppable.

To do that add this code at the end of the addTab() function

jQuery('#'+id).droppable({
   activeClass: 'drag-drop-box-hover',
   accept: '.component',
   drop: function(event, ui) {
     if (!ui.draggable.hasClass("dropped"))
        jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
   }
});

I guess your current jquery code runs only once when the page finished loading. At this time only existing divs are made droppable. For new ones the code needs to run again.

Answer 2

You need to add this at the bottom of the addTab() function:

jQuery('.drag-drop-box').droppable({
accept: '.component',
drop: function(event, ui) {
if (!ui.draggable.hasClass("dropped"))
    jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
   }
 });