Drag and drop DOM manipulation

I'll start with an example and hopefully it will help explain my question.

Say I have two columns. The left column has tabbed content and the right column is empty. I would like to drag a tab from the left column to the right column and have that content displayed in the right column (and that tab would be greyed out in the left column until I "x" out/cancel the right column -- this part I ca开发者_开发百科n probably figure out but was hoping it would give more clarity to the idea).

Is it possible to actually move the item in the DOM or would a better solution be to trigger an event that loads the content in the right column based on (say the ID of) what was dragged and dropped.

I am aware of the jQuery UI draggable features however I am hoping someone has a good explanation or suggestions on the best way to achieve this functionality.

I don't think this answers your question directly, but HTML5 has a nifty drag and drop feature which is explained beautifully here Since the model in drag and drop in HTML 5 involves "data transfer" it would probably be best to transfer the ID of the content and load it in the second column even using JQuery for the sake of future-logic consistency. This way, the code will conceptually work the same if you decide to move it to HTML 5 and will require less modification.