Moving the content of group of cell to another

I have a HTML Table which is similar to the one shown (demo.jpg) in th开发者_C百科e below link. http://www.2shared.com/photo/EF948V7-/demo.html

I'm trying to create a functionality where group of cells can be dragged simultaneously and shifted to another location horizontally. When the group of cell is shifted to new location, the Total Available should change accordingly.

Eg. In the attachment I should be able to move the Group 3 (7th April and 8th April) cell to new dates say 2nd April and 3rd April and the Total Available for 2nd and 3rd should decrease by 10.

How to achieve this using jQuery or JavaScript?

Thanks and Regards, Shijesh

---

If you wrap the contents in your TD with a DIV, it's actually pretty simple.

You need to use jquery droppapble to make the DIVs in the TD droppable in other TDs. Then when someone drags it around and drops it in a TD, you can add your callback function in the drop event and handle it there.