Dear Genius Guys,
I am new to Axure and I need your help please.
I have a timeline with multiple dynamic panels. Each dynamic panel will have unique image. I want to drag and drop each panels and it should reorder automatically. For example: I should be able to drag and drop the last panel (3:00) to first.
When I drag a dynamic panel each other dynamic panels should move and give space for drop.
Thanks
John
Horizontal_DragandDrop_reorder.rp (71.9 KB)
Hi johnyjo,
Unfortunately this really isn’t as simple as you might think using dynamic panels due to the sheer volume of potential permutations/combinations for movement and location. It is possible to some degree using a repeater, but it could get pretty messy pretty quickly depending on how many blocks you were looking to move around and in what manner.
For something like this you may be better off putting together demonstrable testing scenarios and prototyping the specific actions required to achieve them.
I know you’ve asked Gregor for some help on this in another thread and I’ll be honest - I picked up the very advice I’ve just given from him elsewhere on these forums. That said, if he knows of a way, I know he’ll let know (Very useful person around here).
johnyjo,
A few years ago (has it been that long!?) I needed to do just this and came across this thread, which Gregor nailed.
Repeater Drag & Drop Challenge - Implement a Reorder-able List
I adapted that for my needs, which involved a horizontal list of images, scrollable within a window, reorderable, ability to add and remove items, and go somewhere (link) when clicked. Here is a stripped down version of that with images replaced for confidentiality (thanks to super talented photographer, Jill Greenburg). If you click and hold an item for 3 seconds, it will be movable.
DragandDrop_Repeater.rp (1.41 MB)
AxShare Link
The interaction code for all this got pretty complex (as thePsycho79 said) and it’s not perfect, but worked well enough for my purposes at the time. I don’t have time to explain it all, but you can inspect if you like.
I decided I would try to do this in Axure RP 8 “as simply as possible” (ha!) with your .rp file, using just the dynamic panels you have, because RP 8 has added some improvements for dragging I hadn’t played with yet, and to see what could be done without repeater lists (the logic of which can be a lot more difficult to understand.) I came up with a workable solution:
Horizontal_DragandDrop_Reorder_v2.rp (151 KB)
AxShare Link
Still fairly complex, but the gist is to create “slot locations” with hotspots behind your dynamic panels, then move the dp’s to those x-coordinates.
[ul]
[li] When an item is “picked up” by dragging it (onDrag), a “drop slot” hotspot is moved to its starting location to mark the now “empty slot.” [/li][li] Each slot has its own “handler function” in the form of a dp with OnChangeState events.[/li][li] When dragging an item, crossing over a slot triggers the associated handler to take care of the item in that slot, moving it to the empty slot and then moving “drop slot” to its location (because its slot is now empty). [/li][li] Then that handler calls the handler for the next slot over to create a chained series of events that scoots the items over as needed.[/li][li] When the item is “let go” (onDragDrop) it gets moved to the empty slot.[/li][/ul]
I added in a few “indicator” dp’s to show where the slots are located, how the drop slot gets moved, and when the handler dp’s are called. That also helped me debug this thing. (They are redundant with the hotspots, and I could have started with those instead, then added an onLoad : “hide This” event so they were hidden by default.)
This seems to work pretty well, but it is possible to mess it up by dragging an item around back and forth quickly. Some kind of “drop handler” function could help this by ensuring only one item can occupy one slot at a time.
Nice!
I put together a version without using a repeater, because when I tried that route, the objects got into an error state too easily. (Not that this solution is bulletproof, either)
This avoids tons of conditions and performs fairly well in non-IE. The explanation is in the file. (There are 4 pages.)
File: Horizontal_DragandDrop_reorder.rp (254 KB)
Very nice, josephxbrick!
As I was going through my more or less brute force method, I realized it would be much better as an object-oriented approach like you did with each tile taking care of itself. Much more efficient and extensible. You got it down pretty tight.
For me, on IE 11 it seems to work pretty well. Not much noticeable versus Chrome.
nice work… its a good idea to use the if area is over instead calculating the moving positions if not using repeater.
Is anyone else having trouble with this working when building it from Axure 8?
Link to it on AxShare: http://sog9ji.axshare.com
Hi!
I wrote this in Axure 8, but then they changed the way the keyword “This” works when using Fire event. (It now refers to the object that fires the event, not to the object whose event is fired.)
To fix this, you’ll have to get rid of all usage of the keyword This in the OnRotate handler of each object. Instead, use alocal variable referring to the object that has the OnRotate handler as well as addressing the object specifically in the OnMove command.
For example, the condition for OnRotate will now look like the following, where This is replaced by the local variable “me” referring to This.
Please has anyone been able to get this to work in Axure v8? I updated the keyword references to “This” in the OnRotate handler and the onMove handler but the drag and drop still does not work as expected. Rather, drags work but overlaps on top of the object you are moving it on instead of the object switching places.
Please kindly upload an updated rp file made with Axure v8, that would be well appreciated.
Additionally, I am trying to get this to work for a 4x2 grid layout so that I can drag drop the widgets on any of the 8 positions both horizontal and vertical?
Thanks
Thank you for uploading the file. I downloaded and attempted to modify it to accommodate a 3x3x3 grid (9 tiles) for my use. Unfortunately, the drag n drop appears to only move horizontally on the first row only. Can you please kindly check my attached file below to see what I am doing wrong to modify it such that I can drag horizontally and vertically to any of the 9 tiles in the grid?
Horizontal_DragandDrop_reorder 2_3x3_grid.rp (193 KB)
Thank you well in advance for your assistance.
Thanks Joseph!. Was looking for something exactly like this. I am brand new to Axure. Am hoping to create a drag and reorder just like this, but with a list attached, that would reorder when I drag the associated dynamic panels. Do you have a suggestion of where to look for that?
Any chance you could make this work on a vertical? (see the attached image)
I tried to change the variables myself but it didn’t seem to work.
Cheers!
Hi mbc66,
Any chance you can do a vertical version for the Horizontal_DragandDrop_Reorder_v2.rp?
I tried to use your original file (see below) but I didn’t quite understand the logic.
Cheers!
AntonMircea,
I added a vertical version. It basically involved transposing the x-values and y-values for everything. More tedious than I might have thought. This still needs better way to handle the dragging–things break if you drag items back and forth, up and down the rows. Works OK if items are dragged in one direction only before dropping.
DragandDrop_Reorder_v3.rp (267.5 KB)
So, the steps to convert this involved:
Because josephxbrick’s solution is so much more elegant, and I can see AntonMircea was trying to get this to work for a vertical list, I adapted that solution to work for vertical as well. Also a matter of basically transposing x for y (but it took a few tries to get it working correctly–see the “How it works V” page.)
I also played around with using padding and showing items as “picked up” when dragging them. See “5 items V” page.
H_or_V_DragandDrop_reorder.rp (464.3 KB)
