How to change the UI of an item being dropped onto a sortable list?
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 wh开发者_StackOverflow中文版en dropped into the destination list). Does anyone have any ideas of how I can do this or if it's even possible?
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.
精彩评论