This is a quick example of using the built in drag with a handle.
Firstly, we set the drag on the groups rather than the element. And then shape the Group to fit just around the handle element. All other elements are set to ignore pointer events to avoid accidental drag actions, you may need to adjust that to your requirements.
In using the built in drag actions, I notice a possible bug in that the mouse down/up event that should work before and after the drag event did not work after the drag. The Drag/drop timeline would start on mouse down but not on mouse up if a drag occurred. Maybe @jonathan can have a look at this and see if it is a bug or not..?.
So I had to include a JS function to control the drop part when the drag event completed (end).
I did not put in all your functions as this is just an example. To see how things worked with the built in drag API. Which seems to be ok with the responsive..
dragGroups.hype.zip (230.5 KB)