jqueryUI: Drag element from dialog and drop onto main page?

Question

I am trying to create a drag and drop system consisting of a workspace and a "palette". The workspace currently consists of re-orderable list items, and I want the palette to be a floating window from which I can drag items and add them to a specific position on the workspace.

I am currently using the jqueryUI "sortable" plugin for the workspace and the jqueryUI "dialog" plugin for the palette.

However, I cannot drag something out of the dialog and on to the main page. When I try, the item being dragged disappears as it crosses the boundary of the dialog (which makes sense). What can I change so that items will remain visible as I drag them out of the palette and allow me to drop them onto the main workspace?

Alternatively, are there any jquery plugins that offer this sort of drag-n-drop palette as a primary feature?

Answer 1

If dragging items from the palette duplicates them, without removing them from the palette, then the answer is the appendTo option of the draggable plugin. This specifies the container to use during dragging. In my case I created a new div outside the bounds of the dialog and specified that as the dragging container. This allows the element to be drug beyond the bounds of the dialog window.

To move items from the palette onto the workspace, I used the techniques from this similar SO question.