Включить draggable и droppable на динамически создаваемых элементах jQuery

Question

Я хочу автоматически включить «draggable» и «droppable» для динамически созданных элементов. Я НЕ хочу просто повторно инициализировать его после добавления элемента в DOM.

Например:

$('static_element_such_as_body').on('event', 'dynamicElement', function(){ 
    console.log('yayyyy'); 
}); 

Это поистине динамический обработчик события. Как я могу внедрить «draggable» и «droppable» в .on или .live?

Существует код, я использую для перетаскивания и Droppable:

$('.draggable').draggable({ 
     helper: function() { //helper function is used to duplicate the event dragged 


      return $('<p>winning</p>').append($(this).find('.name').clone()); //Idk what class or where .name is but without it, it bombs out 
     }, 
     stack: ".draggable", //this changes our z index to be the upper most 
     start: function(event, ui) { //this fires on start 
      c.tr  = this; //set up our c cariable 
      c.helper = ui.helper; 
     } 
    }).droppable({ //this let's us know this element is droppable 
     drop: function(event, ui) { //when you actually drop 
      $(c.helper).remove(); 
     }, 
     over: function (event, ui) { //called when we are hovering over a droppable element with this selector 
      console.log('over'); 
     }, 
     out: function(event, ui){ 
      console.log('left'); 
     } 
    }); 

Answer 1

Очевидно, никто не знает, так что я понял, более «автоматизированный» решение. Вместо того, чтобы вручную повторно инициализировать его после добавления элемента, вы можете использовать этот обработчик событий для автоматизации этой повторной инициализации для вас.

$mainContainer.on('DOMNodeInserted', function(e){ 
    if($.inArray('relatable', e.target.classList) != -1){ 
     drag_drop_init(); 
     if(helper_bool_isRelatableEnabled){ 
      drag_drop_enable(); 
     }else{ 
      drag_drop_disable(); 
     } 
    } 
}); 

Где $ mainContainer это статический элемент, например, $ («тело») и «Relatable» это имя класса, который я использую, чтобы знать этот элемент должен позволить перетащить и Droppable. Это класс, который я использую для инициализации, то есть: $ ('. Relatable'). Draggable()