JQuery Drag and Drop Products

Simple customization to this jQuery tutorial example. [login to view URL] Product image menu (left) would be smaller menu of all available items arranged by category. Each category is expandable/collapsible to conserve space. Cart details (right) other than "Total" should be hidden to make room for the "stage". Each product has a unique ID and an associated image and value. The drop area reflects a large physical space with custom dimensions (lines) set by the user. Space can contain more than one defined area. Defined lines need to contain snap selectors to center dropped objects on the lines. Product images may need to rotate to snap to the line. Other droppable items from product menu need to snap to existing products on the stage as well as the lines. As products are added a total is dynamically calculated (top right) which will generate an order details screen when a button is clicked.