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。但是当我创建动态标签时，它无法正常工作。如何在动态标签页中拖动。

这是静态代码的HTML代码，其中删除元素运行良好

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

这是css代码：

.drag-drop-box {
    max-width: 780px;
overflow:scroll;
position:relative;
    height: 540px;
    border: 3px dashed #F7941D;
-moz-border-radius: 10px;/*Firefox*/
-webkit-border-radius: 10px;/*Safari, Chrome*/
border-radius: 10px;
overflow:hidden;
margin:0 auto;
}

以下是动态创建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

您动态创建的新元素尚未被droppable函数选取，因为它是在您调用该函数后创建的。所以你需要做的是每次添加选项卡后都调用jQuery droppable函数（在函数addTab（）的末尾）。

function addTab() {

 //Your codes

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

如何在生成的动态选项卡中拖动元素

1 个答案: