如何在生成的動態標籤拖動元件

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 class="item-box"> 
    <div id="tabs-1"> 
     <div class="drag-drop-box"> </div> 
    </div> 
</div> 

其中下探元素的靜態代碼的HTML代碼，這是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函數拾取因爲它是在您調用該函數後創建的。所以你需要做的是每次添加選項卡後（在函數addTab（）的末尾）調用jQuery droppable函數。

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