Home/ Questions/Q 7882479
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T04:17:39+00:00

OK, what I’m trying to do here is to have jQuery UI update the

  • 0

OK, what I’m trying to do here is to have jQuery UI update the sortables that are displayed on the page when a new column is dynamically added to the page by cloning it. If you clone a column (demo page) the new column should be able to receive both items from the existing column lists as well as new items that can be dragged from list A at the top into one of the sortables. This works fine for the initial setup, but as soon as you clone and append a new column, things break; the newly cloned column is not recognized as a droppable target and I can also not drag new items from list A to the newly cloned column list.

Intuitively the sortable(‘refresh’) command should be enough for the sortable to check if anything in the setup is changed and enable new elements to receive and handle sortable items. However, I try to do this when the button is clicked, but there seems to be no effect.

I also tried to bluntly call the whole sortable() plugin on the ‘.columnlist’ selector again, hoping that it would initialize on new matched elements and would simply skip over the elements that have the sortable already.

Oh and of course I use clone(true, true) to make sure events and data come with it.

Please see the demo page here: http://labs.shifthappens.nl/dragsort/
Try the following:

  1. Drag an item from list A to column list A or B. The drag to sortable works
  2. Re-order items in column list A. Sortable works.
  3. Click on the clone button. A clone of column C appears.
  4. Try to drag any item (be it from list A or from another column list) to the cloned column C and behold: it does not respond. It is as if it doesn’t exist.
  5. Funny thing: if you already put items in the original column C and then clone it, the items that are in the cloned column CAN be moved to other lists, but once out, can’t be moved back to the cloned list. As if it rejects its own offspring.

How can I make the cloned list(s) to be sortable and valid dropzones as well?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As pointed out by jaredhoyt it indeed was about deep cloning. Apparently jquery ui doesn’t need deep cloned elements and in fact breaks if you do that and expect the new elements to be droppable targets too.

    However I did find the need to do another $(‘selector’).sortable() on the columns for the cloned list to be recognized. This is what jaredhoyt also did in his fiddle. This while for me intuitively the ‘refresh’ method would be the most elegant solution, no?

    Anyway, case closed. I’m happy it was as simple as not cloning the column with data and events, just the HTML.

    • 0