jQuery динамически переинициализирует / обновляет перетаскиваемые / сортируемые элементы

Question

У меня есть несколько функций, которые я загружаю в событие ready (). Они в основном делают список перетаскиваемым, а другие области - перетаскиваемыми / сортируемыми. Например. Вы можете перетащить клон в несколько областей (списки в div), а внутри этих нескольких областей вы можете отсортировать / переупорядочить их (но только внутри каждой области). Это отлично работает.

У меня есть кнопка, которая динамически создает новую область для элементов, в которые можно перетаскивать их, а затем сортировать. Он отлично создает новую область, но вы не можете бросить в нее предметы или даже сделать их сортируемыми.

Я понимаю, что это связано с тем фактом, что я делаю все области перетаскиваемыми / сортируемыми при загрузке страницы, используя событие ready (), и фактически не выполняю эти функции динамически.

Я пытался использовать «обновить» на этих элементах внутри функции нажатия кнопки. Например.

$(".field > li").draggable('refresh');
$(".dragrow1, .dragrow2").droppable('refresh');
$(".dragrow1, .dragrow2").sortable('refresh');

Но это не работает. Я хочу избежать повторения моего кода, если я могу помочь. Есть ли способ сделать эту работу? Я подумал, что если есть что-то похожее на функцию «live ()», которую вы можете использовать с «ready ()», то это может быть решением, но нет ...!

Спасибо.

Answer 1

Почему бы не закодировать вашу инициализацию как собственное дополнение к jQuery? Тогда ваш код инициализации, а также код, который добавляет динамические элементы, могут просто так все настроить.

jQuery(function() {
  jQuery.fn.myDroppableSetup = function myDroppableSetup() {
    this.each(function() {
      // your setup code here
    });
    return this;
  };
  jQuery.fn.myDraggableSetup = // ...
});

Тогда вы можете просто использовать это снова при динамическом добавлении:

$('div.newlyAddedDroppable').myDroppableSetup();