Horizontal Drag and Drop + Reorder

[johnyjo]

This is Great. Thank you verymuch Joseph. You are simply a Axure Legend

[Gregor]

nice work… its a good idea to use the if area is over instead calculating the moving positions if not using repeater.

[Belle]

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.)

Live sample

File: Horizontal_DragandDrop_reorder.rp (254 KB)

Is anyone else having trouble with this working when building it from Axure 8?
Link to it on AxShare: http://sog9ji.axshare.com

[josephxbrick]

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.

[goshenweb]

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

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.

[josephxbrick]

Hi!

Here is a working version in 8.

Horizontal_DragandDrop_reorder 2.rp (131 KB)

[goshenweb]

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.

Hi!

Here is a working version in 8.

[Kilowatt]

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?

[josephxbrick]

Hi Kilowatt -

This post has a nice list-sorting solution using a repeater.

[AntonMircea]

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!

[AntonMircea]

Here’s the example I’ve been working on.
Cheers!
vertical.rp (134.8 KB)

[AntonMircea]

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!

[mbc66]

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:

1. Copied page, named to “Vertical”
   2. Repositioned and resized hotspots and dynamic panels, transposing width and height values.
   3. Updated the onMouseDown event for each tem (panel1 through panel4) to move DropSlot correctly.
      a. Again, this was transposing the x and y values. In this way, clicking on an item moves the “drop slot” to the top of the item (to track where it came from).
      b. Note you can do this once for panel 1 then cut & paste to the rest.
   4. Update the onDrag boundaries for each item in case 1 to limit the “draggable area” to match the hotspot areas.
   5. Update the onDragDrop event to transpose x and y values.
   6. Update each of the Slot Handler events to transpose x and y
      a. (The function code is swapped for each x and y value)
      b. This was kind of a pain… no cut & paste tricks here
   7. Added a line for each Slot Handler event to move the Drop Slot to its y-value. Otherwise the items weren’t getting moved (dropped) properly.

[mbc66]

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)

[AntonMircea]

@mbc66,

This is awesome! Exactly what i needed. Thank you for the effort.

[AntonMircea]

@mbc66, thanks for doing this, unfortunately I tried to use @josephxbrick solution you edited but it doesn’t seem to work. See the gif attached. Is it working on your machine? What browser are you using to see it?

x

[mbc66]

I’m using Windows 10 and just tested this on latest versions of Chrome, Firefox, and Edge browsers. It worked correctly on all (although clunky and slow on Edge.)

I put this up on AxShare here: https://bope9k.axshare.com/

• I tested it with no problems on Windows and Mac (OSX Sierra) with Safari and Chrome.

• So, looks to me like this is a bug in the Mac version of Axure.

See the version posted earlier in this thread: Horizontal_DragandDrop_reorder 2.rp and the discussion about the use of “This.property” versus a local variable. I thought I had started with that version, but I guess I did not. You should be able to update my code fairly easily by following josephxbrick’s instructions in this thread. Let me know if you still need help with that.

[Kyary]

Hi mbc66,

it dosent work well when im changing the height of one of the row.
do you have a solution for this problem?

this is how it look in you edited file:

and this is the outcome:

Thanks
Yary

[mbc66]

@Kyary,

This basic “list sorting algorithm” does have a constraint that all items have the same size (or at least same height when sorting vertically.) To handle varying heights, we must keep track of the height of the dragging item as well as the height of the item that needs to slide up or down, so that the drop locations are correct.

Here is a solution. It works for me on Win10+Chrome 71.
H_or_V_DragandDrop_reorder.rp (500.7 KB)

[Kyary]

Thank you very much its was very helpful