如何将元素拖放到动态生成的 DIV，拖动功能正常答案

【问题标题】：How to drop elements to a dynamically generated DIV, Drag function is working Fine如何将元素拖放到动态生成的 DIV，拖动功能正常
【发布时间】：2014-03-23 13:38:46
【问题描述】：

这是我正在使用的 jQuery 代码：

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());
        }
    });
});

此代码在预加载的 div 上运行良好。但我正在动态创建 div，如何让它为动态生成的 div 工作。

这是静态代码的 HTML 代码，其中放置元素效果很好

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

这是动态创建 div 的 jQuery 代码：

 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++;
}

【问题讨论】：

标签： jquery jquery-ui-tabs jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

我认为您需要使动态创建的 div 可放置。

为此，在 addTab() 函数的末尾添加此代码

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());
   }
});

我猜你当前的 jquery 代码只在页面加载完成时运行一次。此时只有现有的 div 可以放置。对于新的代码需要再次运行。

【讨论】：

【解决方案2】：

你需要在addTab()函数的底部添加这个：

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());
   }
 });

【讨论】：