Jquery 拖放不适用于动态可拖放部分

Question

需求是这样的，编辑器里面有需要拖拽的项目列表。其中列表可拖动，编辑器可放置。

所以当我调用 Jquery 拖放函数时，它工作正常，项目在编辑器中是可放置的。

但是当通过ajax或使用jquery动态添加多个Editor时，项目应该能够在新生成的编辑器里面的Droppable。已经有添加更多编辑器的功能。

我再次为新生成的编辑器调用拖放功能，但它仅适用于现有编辑器，不适用于新添加的编辑器。

Draggable 部分是固定的，但 Droppable 部分是多样且动态的。

（注意：如果已经加载，它适用于多个编辑器，但如果我调用拖放功能并添加新编辑器则一次。我再次调用拖放功能，不适用于新编辑器）

我的代码，

 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

这是您使用 Ck-editor 等编辑器克隆相同输入的 JavaScript 的加载/卸载问题。所以请先加载编辑器 JavaScript，然后再次加载可拖动的 JavaScript，然后它将 100% 工作。