javascript - jquery drag n drop, not allow drop on clone drop container -

try drag item , drop clone div, it's not working. it's seem jquery drag n drop not allow drop on clone item.

drag n drop working on first one, after click add more dropzone, , try drop item new dropzone. it's not allow to.

here jsfiddle

$(document).on("click", ".add_dropzone", function(e){ $('<div class=\"dropzone\"></div>').insertafter($('.dropzone').last());});  $( "ul li" ).each(function(){     $(this).draggable({         helper: "clone"     }); });  $( ".dropzone" ).droppable({     activeclass: "active",     hoverclass: "ui-state-active",             tolerance: "touch",      accept: ":not(.ui-sortable-helper)",     drop: function( event, ui ) {          var targetelem = $(this).attr("id");          $( ).addclass( "ui-state-highlight" );          if($(ui.draggable).hasclass('draggable-source'))             $( ui.draggable ).clone().appendto( ).removeclass('draggable-source');           else              $( ui.draggable ).appendto( );              $('.delete').on('click', function () {             $(this).parent().parent().parent().parent('li').remove();         });         //alert($(this).text());     }  }).sortable({     items: "li:not(.placeholder)",     sort: function() {         $( ).removeclass( "ui-state-default" );     } }); 

any appreciated!

how this

i have moved initializing code function

final code like

$(document).on("click", ".add_dropzone", function (e) {     $('<div class=\"dropzone\"></div>').insertafter($('.dropzone').last());     initdroppable(); });  $("ul li").each(function () {     $(this).draggable({         helper: "clone"     }); }); initdroppable();  function initdroppable() {     if (typeof window.dropelem != "undefined") window.dropelem.droppable('destroy');     window.dropelem = $(".dropzone").droppable({         activeclass: "active",         hoverclass: "ui-state-active",         tolerance: "touch",         accept: ":not(.ui-sortable-helper)",         drop: function (event, ui) {              var targetelem = $(this).attr("id");              $(this).addclass("ui-state-highlight");              if ($(ui.draggable).hasclass('draggable-source')) $(ui.draggable).clone().appendto(this).removeclass('draggable-source');               else $(ui.draggable).appendto(this);              $('.delete').on('click', function () {                 $(this).parent().parent().parent().parent('li').remove();             });             //alert($(this).text());         }      }).sortable({         items: "li:not(.placeholder)",         sort: function () {             $(this).removeclass("ui-state-default");         }     }); }