Drag and Drop behavior prototype

[kublaiboy]

Hi Axure gurus,

I need your help with prototype a drag and drop behavior. I’ve attached my RP file here. I have 3 buttons on the page. UX Research, UX Design, UX Writing. Each button can be dragged and re-arranged in different order. When you drag one button(UXR) over another(UXD), it will set X, Y coordinates as variables. These two variables will be passed on to the button being dragged over(UXD). Then I tell Axure to move that button(UXD) to the original position of the dragged button(UXR). This all works fine when I realized that there’s no way I can track the name of the button that being moved(not dragged one). There could be so many permutations of how these three buttons are arranged. One idea was to assign Top, Mid, Bottom drop zones, and whichever button(A) ends up in a zone would be assigned to a variable. When button A is dragged over and released over the button B, I add release action under button A to send button B to the starting XY coordinates of button A. This requires me to specifically calling out the button B name. I can assign XY coordinates variables to each of the 3 buttons like UXR_X_Var, UXR_Y_Var, UXD_X_Var, UXD_Y_Var, UXW_X_Var, UXW_Y_Var, but I don’t know if I can assign the widget name being moved as a variable(button B) without specifically calling out the actual button B name in the release actions for button A. This is where my Axure knowledge ends, and I’m stuck. The whole idea here is to avoid using the actual widget name to move that widget. There’s just no way I can keep track which button name is on which drop zone after a few re-arrangements. No sure if I explained my challenge properly.

The other idea I had if I could detect button B is being overlapped and released over by button A, I could tell button B to go to the original position of button A. This action would be placed under button B, but not button A like the above scenario.

I’m building this behavior because I want to prototype a draggable form in near future so the rows in the form can be dragged and re-arranged. There could be way more rows than just 3.

Please take a look at my RP file. Thank you so much.

BTW, I love Axure. So much fun building prototypes in Axure.

KB

drag_drop.rp (106.7 KB)

[mbc66]

Sounds like you have a good grip on understanding the problem… The last idea you mention is basically the best approach I’ve seen for this without a repeater.

• A good way to detect if widget A is over widget B or C or D, etc. is to test for each possibility in a series of Else If cases. Assign the cases to the Dragged or Moved event of each draggable widget.

• A good way for widget A to tell widget B to do something is to use the Fire Event action. If it is something the user wouldn’t/couldn’t ever do, like moving widget B automatically to widget A’s original location, you can utilize some otherwise unused action of widget B, like Rotate, Resized, Moved, etc.

A few months ago I posted an updated example of this approach, built from several threads years ago which have been deprecated.

Draggable cards

@ame, A few things for you to check out. In general, this thread has a great solution: If you need to support dragging only when user clicks then drags from the “hamburger icon” (let’s say it is named, “MyIcon”) then you can set up a conditional case in the Dragged event with a condition like, If cursor is over area of MyIcon or probably better yet, a Mouse Button Down event for MyIcon that sets it to Selected and then in Dragged event (of the dynamic panel to be moved) a condition of, If i…

Using a repeater can help with more than a handful of items, but you need to “fake” the movement of items between rows. @pdcdec has posted a great solution for this:

Reordering and moving rows using repeaters

I just want to share these repeaters allowing rows reordering and copy or transfer of rows between repeaters by drag and drop. It builds on the approach from mnearents (https://forum.axure.com/u/mnearents) in this thread: Drag and Drop Reorderable Repeater (Drag and Drop Reorderable Repeater). The main features are: lists (repeaters) can be placed inside any DP (no global/local coordinates issue) lists are reorderable you can move rows from a list to another rows can be removed or not from …

Hopefully one or both of these threads can help you. If you can’t get it applied to your prototype or run into other issues, I can take a look at your file.

[kublaiboy]

OMG, I realized I totally over thought this problem. I totally had a brain fart and put myself in a corner. You’re exactly right. Each button would have two separate conditions for Dropped events(3 drops in this case): 1. Checks if this button A has been dropped in drop zone B which is where button B placed. If it does, btn A will be placed in drop zone B. 2 Checks if btn A is overlapping btn B, then it will send btn B to btn A original position(Var X and Var B). So 3x2, total of 6 dropped actions for each button.

The only downside would be that each button would need 3x2=6 dropped actions. You’re absolutely right. This becomes hard to manage when you have a table of draggable widgets, without using repeater that is.

Let me finishing up this manual approach first. I’ll take a closer look at this repeater method. I do have a lot of table pages that could benefit from this.

This is one thing I love Axure. There’re always multiple ways to make something happen.

Thank you for the tips. BTW, I haven’t completed the other car model/year selector/check list you helped. I knew how to do it now after doing other Axure prototypes using variables/conditions/expressions. I’ve learned a lot in the past two months. It’s just I got pulled into some other fires that I need to prototype first. PMs constantly change their mind on what to build first, sigh. That vehicle selector needs to be prototyped sooner later for usability tests regardless.

KB