Как перетащить элементы в динамически сгенерированный DIV, функция перетаскивания работает отлично

0

Вот код 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++;
}
Теги:
jquery-ui-tabs
jquery-ui-droppable
jquery-ui-draggable

2 ответа

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 выполняется только один раз, когда страница закончила загрузку. В это время только существующие divs становятся недоступными. Для новых необходимо снова запустить код.

1

Вам нужно добавить это в нижней части функции 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());
   }
 });

Ещё вопросы

Сообщество Overcoder
Наверх
Меню