Question

这是我正在使用的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++;
}

Answer 1

我认为你需要让动态创建的div droppable。

为此，请在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可以删除。对于新代码，代码需要再次运行。

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

如何将元素拖放到动态生成的DIV中，拖动功能正常工作

2 个答案: