代码之家 › 专栏 › 技术社区 › Amit Singh

如何将元素拖放到动态生成的DIV中,Drag函数运行良好

jquery-ui-droppable jquery-ui-draggable jquery-ui-tabs jquery

Amit Singh · 技术社区 · 10 年前

下面是我使用的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++;
}

2 回复 | 直到 9 年前

Tom 10 年前

我认为您需要使动态创建的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是可丢弃的。对于新的,代码需要再次运行。

Krishan Gopal jGupta 10 年前

您需要在 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());
   }
 });

推荐文章