Вот код 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. Но я динамически создаю divs, как я могу заставить его работать для динамически генерируемого div.
Это HTML-код f статический код, в котором элементы отбрасывания работают хорошо
<div class="item-box">
<div id="tabs-1">
<div class="drag-drop-box"> </div>
</div>
</div>
И вот код jQuery, который динамически создает divs:
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++;
}
Я думаю, вам нужно сделать динамически созданный 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 выполняется только один раз, когда страница закончила загрузку. В это время только существующие divs становятся недоступными. Для новых необходимо снова запустить код.
Вам нужно добавить это в нижней части функции 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());
}
});