jQuery Multiple Draggable and Droppable

For people who is starting to use jQuery like me, will find out that jQuery is really really a good javascript library and it is not just a library but also a useful UI (User Interface). You might have seen the full documentation of how to use its UI as well, but did you find something that is missing, something that you might need to achieve the functionality that you want? For me, I found out that there's no documentation nor example of how to achieve multiple drag and drop in the jQuery UI official website, I need this functionality in order to select multiple items, drag and drop them to different droppable area. Specifically, what I need is a better user interface to let a user to "pack" items from an item list to some boxes in an easy and convenient way. The functionality that I want is depicted as the following figure:

Figure 1. jQuery multiple draggable and droppable moving three draggable items from "Item Area" to "Box 1"

Demo: http://yy.jangmt.com/willart/testPackaging.php

People that have the same need as me, which is to select multiple items and then drag and drop them together to the droppable area might have tried to google around to find how to do it. So far, I found this: http://thechriswalker.net/select-drag/, but I haven't seen through its code; there are also some short answers in http://stackoverflow.com of how to do multiple draggable and multiple droppable.

In the next post, I'm gonna explain more about how I made the multiple draggable and droppable, so please keep on following my blog!