I’ve updated the Scriptaculous demo that I put up a while back. You can see it here. There were a large number of comments on the initial post, many of them wondering why the example didn’t work in Scriptaculous 1.6.X. I took a look at it today and after some experimentation made the following changes to get it to work:

  • Reversed the order of creating the sortables – for whatever reason, it seems that the outer most sortable must now be created last, whereas it worked fine when created first before
  • Removed the code to ‘destroy’ the sortables before recreating them – this was necessary before, but it seems that they are automatically destroyed now when creating a sortable on the same element. While this slimmed down the code, it wasn’t essential to get it to work Scratch that. I noticed a bug where dropping elements on the sections wasn’t working if a new group had been created before any of the line items had been added to a group. Adding back the destruction of the line item sortables did the trick. It still seems to be working without the destruction of the page-level sortable though.
  • Added a prefix to the new section id for consistency sake (as per John’s comment)
  • Other miscellaneous JavaScript and CSS cleanup

There were also several comments questioning whether this positioning can be saved to the database. That’s exactly what the debug function is aimed at doing – showing the user how to get at the positioning information with JavaScript. Once you’ve got it into a JavaScript string/array/object, it’s trivial to put it into an input and submit a form.