In my app, I’m using drag/drop to set the order of items in a list. Because the list can go on for more than a page, the app makes it easy for users to drop an item to the very top of the list by dropping it on a drop zone in the header. Because it is a floating group, the header is always on the page regardless of where the user scrolled to in the RG.
This snippet shows part of the header and repeating group:
The element where it says “Drop Action at Top of List” is normally hidden. When the header drop zone is dragged over, the text is made visible, with a bright yellow background drawing attention to it. (Actully, it’s the underlying drop zone that gets the yellow background, but it could just as well be the text element.)
All the functionality works great.
However, I’d like to help the user understand what’s possible while dragging an item.
When the user starts dragging an item, I’d like to hide all the other header text and show the “Drop …” text so it’s obvious what the user can do by dropping an item on the header.
Responding to the drop zone being dragged over is easy. The invisible text element has a conditional that tests for the drop zone being dragged over.
However, when I try to reference the drag element, it’s not available to any header elements because it originates within the RG.
Any ideas for how to let the header element know that something is being dragged so it can signal its availability for dropping?