Drag multiple items

#1

I am trying to create an interaction where the user can select multiple rows of a table and then drag those rows to another area. I have a repeater table with a dynamic panel, as well as an area to drop the dragged item. I have multiple rows being selected working, and I have drag over an area working. But I cannot figure out how to drag multiple selected items in the repeater. I am guessing that because I cannot find mention of anyone else asking online that it can’t be done and is accepted. Any help would be appreciated, even if it is “can’t be done” so I don’t continue to waste me time.

#2

I’m pretty sure this can be done, but it might take a bit of work. The basic topic–drag & drop of repeater items–has been asked before, over the years, resulting in several solutions. The best I’ve seen use a kind of “ghost item” like a hidden dynamic panel which is shown during the drag to mimic the repeater content being “picked up and moved” …while the actual “copy” or “cut”, and then “paste” is done with repeater actions like Update Rows, Delete Rows, Add Filter, etc.

Take a look at this thread with a great solution and great explanation of how it works.

I’m not sure if I’ve seen a post asking to drag multiple rows at the same time, but I think the same basic approach would still work. Your ghost object could show that multiple items are being dragged together …maybe they appear stacked with only the first or last item actually shown, or maybe it just indicates the number of items selected without the “row content”. Then, at the drop, you could “tickle” the first repeater by calling a “listener event” (something otherwise unused like Move or Rotate) of a widget in the repeater. It would have a conditional case testing if that row is selected, and if so add a row in the second repeater with all of it’s datasheet content, and then either delete itself, or mark itself as “already copied”. Or, you could apply an action from the drop event to delete or filter out, or update all selected rows of the first repeater.

#3

I found this thread also, which is about copying multiple repeater rows to another, as well as drag & drop.

#4

Thank you for sharing these. I will have to go over it with a fine tooth comb to see how I can recreate it for my needs.

#5

I made a little demo of this approach to see if I could prove it would work.

drag multiple repeater items.rp (94.6 KB)

It works, but I did run into some issues along the way. At a high level it uses the approach I described above. There is a “List1” repeater with several items, and an empty “List2” repeater. When one or more items from List1 are selected they can be dragged to List2. Dropping them there populates List2. I added a drop area behind the empty List2 that gives instructions and “lights up” when row items from List1 are dragged over it. When a List1 row item is selected then dragged, its contents are duplicated to a “GhostRow” panel. If more than one row item is selected, a counter in “GhostRow” is incremented and a “GhostDup” widget is shown to indicate a “stack of items” when dragged. When dropped over the List2 (or drop area) a row is added to List2 for each selected List1 item, using the data from those List1 items. I just left the List1 items shown and unselected upon a drop. Should be straightforward to add a filter or delete row action for List1 upon a drop, if you want.

Initially, the Dragged event worked fine until I included Drag Dropped, and then some of the actions in both events just didn’t happen. My guess is the Axure/HTML code got overloaded, perhaps because it is being done from a repeater. So, I moved the set of Dragged actions to the Moved event of GhostRow. In this way, the Dragged action has only one thing to do: Move GhostRow with drag …then GhostRow takes care of itself as it is moved around. I also moved the Drag Dropped actions to a widget in GhostRow so it can similarly take care of itself (as the Rotated event of “GhostBG” is triggered.) This worked to fix the odd/buggy drag behavior.

I also ran into some unexpected behaviors when I tried to enable a List1 item to be dragged directly, in addition to clicking an item (or more) to select/deselect it first. In other words, a list item could be dragged without selecting it first–it would select itself and be draggable. I think it caused a collision of sorts between the Click or Tap and Drag Started events. So, a List1 item must be clicked first to select it, then dragged to List2.

When one or more List1 items are dragged, the Drag Started event stores the list index of the row (directly under the cursor) in the “varIndex” widget in the GhostRow panel, sets text values for Name and Price, and shows GhostRow. The Shown event of GhostRow moves itself to the same position as that List1 row, and shows an “Overlay” widget in List1 that appears to “gray out” the selected rows while they are being dragged over to List2. The list index serves as an offset from the top-left of the List1 repeater (because the absolute x,y position of each row is not available, it is calculated as an offset from the top-left of List1.

The “GhostBG” widget in GhostRow does the work of copying selected rows in List1 to List2. When the dragged items are dropped in a target area, it triggers a Rotated event for the “Row” dynamic panel widget in List1. In this way, every row in List1 fires its Rotated event (of course, nothing actually gets rotated, it just serves as a kind of “listener event” with a dedicated subroutine function.) When it fires, the row tests if it is selected, and if so, adds a row to List2 using its own data.

Let me know if you have any questions about the details, or if you want it to work differently but can’t figure out how.