Question

I have two jQuery UI sortable lists. I’d like to change the UI of the dragged item when I drop it on the final list (start off as a small widget in the source list, but explode it to a detail view when dropped into the destination list). Does anyone have any ideas of how I can do this or if it’s even possible?

Answer 1

You could use the stop event:

This event is triggered when sorting has stopped.

You’d have something like this:

stop: function(event, ui) {
    $(ui.item[0]).html('Replace the HTML as needed.');
}

Live demo: http://jsfiddle.net/ambiguous/Cb5BQ/

You’d want to keep track of the the current state (small or large) in a class so that you can switch between the “small widget” version and the “detail view” version as appropriate.