Hello,
I am trying to make drag and drop functionality where a user can drag an item from one group, and drop it to another. The issue I am having is figuring out how make the group that has an item added to it reorder with the new item, and the group having an item removed from it reorder with the missing item.
Here is the working file:
YourHealth_20181207_POST.rp (832.3 KB)
Thank you in advance!
Hi jvirothaisakun,
It sounds like you would like to have your page’s “Your Favorites” and “Your Other Data” groups reorder as they are dragged from one group to the other.
To clarify, are you interested in making it so that the dragged items follow a particular order structure, such as an alphabetical order, as the two impacted items swap places? Alternatively, are you interested in making it so that only one item moves position as it is dragged to the new group? An example of this would be dragging an item from the “Your Favorites” group down into the “Your Other Data” group, so that there are three items in the “Your Favorites” group, and eight items in the “Your Other Data” group. Please let me know what your thoughts are.
Thanks!
Hello @Chelsea_Axure ,
Thank you so much for your response. I am interested in making it so that only one item moves position as it is dragged to the new group. When an item is dragged into a new group, it should retain the position that the user is dragging it to. Then the old group should reorder to close any gaps left by the moved item, and the new group should reorder itself around the item that was just placed within it. Let me know if that doesn’t make sense.
Thanks!
-Joël
Hi Joël,
Thanks for letting me know! To handle this behavior, you would most likely need to track whether the dragged widget is being moved within its original area, the Favorites or Others area, or if it has moved into a new area. If the dragged widget is being moved within in its original area, the widgets should be allowed to swap between each other. However, if the widget is being dragged into a new area, then another set of interactions will need to occur, where the widgets do not swap positions. You can track this differentiation by placing shape widgets underneath the specified areas of the prototype, and creating a series of global variables. For example, you can make it so that an OnDragStart event occurs when the widget is over the “Favorites” area, the global variable sets to a value of “Favorite”. You can then create a series of OnDrag events that change another global variable, “Space_change”, for example, to set to either a value of “yes” or “no”, depending on the “Current_space” value and which area the dragged widget is currently over. When the “Space_change” value equals “yes”, then you could make it so that rather than the widgets swapping spaces, the widgets move to accommodate the newly added or newly lost widget from the area.
For a quick demonstration of using these global variables for this type of interaction, here’s a file where the OnDrag Start and OnDrag events are tied to a series of show and hide actions that push and pull the third box and second box as the first box is dragged to the lower section, over the area of the third box.
dragdp_sample.rp (65.0 KB)
Also, while this does not include drag and drop features, I have seen a similar sort of functionality implemented using a pair of repeaters. Repeaters may be worth investigating as an option for moving the tiles. The post regarding this can be found here:
I hope this helps some!