JQuery reinitializes / updates drag & drop items dynamically

Question

I have several functions that I load in the ready () event. They basically make a drag-and-drop list, while other areas are inaccessible / sorted. For instance. You can drag a clone into several areas (lists in a div), and in these several areas you can sort / modify them (but only inside each area). It works great.

I have a button that dynamically creates a new area for items that need to be discarded and then sorted. It perfectly creates a new area, but you cannot drop elements into it, and then even sort them.

I understand that this is due to the fact that I make all areas inaccessible / sortable when the page loads using the ready () event, and not actually re-run these functions dynamically.

I tried using 'refresh' for these elements inside the button click function. For instance.

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

But that does not work. I want to avoid repeating my code if I can help him. Is there any way to make this work? I thought that if something looks like the "live" () function that you can use with "ready ()", then this might be the solution, but not there ...!

Thank.

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