Jquery drag drop is not working for the dynamic droppable section

Question

The requirement is like, There are list of items need to drag inside Editor. Where list as draggable and editor as droppable.

So when I call the Jquery drag drop functions it works fine, the items is Droppable inside the Editor.

But when multiple Editors dynamically added by ajax or using jquery and the items should be able to the Droppable inside the newly generated editors. There is already functionality to add more editors.

I call the drag drop function again for the newly generated editors but it only works for the existing Editor not for the newly added Editor.

Draggable section is fixed but the Droppable section is various and dynamic.

(Note: It works for multiple Editors if loaded already, but once if I call the drag drop function and than added new Editors. Again I call the drag drop function, doesn't work Work for the New editors)

My code,

 function _dropable_cktext_editor(){
    $('.jqte_editor').droppable({
      drop: function( event, ui ) {
        var item_name = ui.draggable.find('.name').text().trim();
        $(this).append(" ["+item_name+"]");
      }
    });
  }
  function _dragable_cktext_editor(){
    $('#spec_type_groups_edit li ul li').draggable({
      revert: "invalid",
      containment: "document",
      helper: "clone",
      cursor: "move",
      start: function(e, ui)
      {
        $(ui.helper).addClass("ui-draggable-helper");
      }
    });
  }  

Answer 1

This is loading/unloading issue of JavaScript of what you are using for clone same input with editor like Ck-editor etc. So please first load the editor JavaScript then load again draggable JavaScript, then It will work 100%.