Dragging sets of rows

I have a system where people can add items to a purchase order. The items go into a grid. That’s perfect.

Then, there are “packages”. So, I’ll have a “video package”. It’s actually one row that says, “Video Package - $500”, then 3 more rows under it: LCD Projector, 10’ Screen, HDMI Cable

We added Drag-Drop capability for ordering how the items are displayed. Which is perfect.

NOW, I have a problem. They want to be able to click on the “Video Package” row, and drag it up, including all the associated rows with it.

So, if I have 10 rows, and “Video Package” is on row 6, with the 3 lines beneath it on line 7,8 and 9. The user drags the row “video package” - or any of the sub-rows - to the top, I want all 4 rows to get moved to the top.

The only way I can figure out how to do this would be very tedious and require a reload of the grid. Do you have any ideas?

Please, have a look at the following example:
dhtmlx.com/docs/products/dht … _drag.html

If any issue is still occurs - please, provide any kind of sample of your code.