Change Colors | Toggle Debug | Comment | Reload
Get CBE at Cross-Browser.com
Any of these elements can be dragged and dropped into any of the other elements, including dropping into the document itself.
The element you grab is removed from its parent, appended to document.body and remains there as you drag. When you drop it on a target element, it is removed from document.body and appended to the target element.
The selection of text during the drag is still a problem. Click the document to cancel the selection.
This only works in browsers that have the native methods appendChild() and removeChild().
Special thanks to Zac for some terrific implementation ideas.
This example uses the removeChild() method which is not in CBE v4b10. It will be in v4b11.
Open the Debug window to see the CBE object tree. Drag and drop some elements then toggle the Debug window to refresh it. You will see how the CBE object tree changes.