While this is not complicated, I couldn't find any examples on the jQuery site or from a Google search. To help other people that have not memorized the jQuery API, I wrote this little post with a few little tricks that I have found for accomplishing this task. The less time you have to take figuring out little things like this, the more you can get done on your project. So I hope this helps out!

Demo

Javascript

On the sortable update event handler, we check to see if the item was dropped on the #sortable-delete list element, and then remove it. I found that using tolerance: 'pointer' fixed a problem where the #sortable-delete list would not accept any items when it had a width and height defined.

CSS Styles

When you're dragging a list item, jQuery puts an empty placeholder wherever you drag the element, so you get a better idea of where it's going to be dropped. It looked very unnatural for the trash bin to shift down and up when this happened, so I set the height of #sortable-delete to the height of the image and set overflow:hidden. Empty lists will not accept items if the height and width of the list is 0. Adding a small padding to the list will fix this problem.

HTML