On Drag - Move with drag

#1

Dear All,

I came across a difficult situation. I am preparing a project for my client but I am stuck on one thing.
(Please see attachment)
Basically what I am trying to do is having a huge map (Nearly like excel) that you can drag on
X and Y axis, the only problem is once you try to drag it, it drags both Axis at the same time.

What I mean is, it would be better to drag one Axis at a time. So… I want to be able to drag X and Y but not at the same time, its either dragging X or Dragging Y. Is this possible?

Test.rp (130.1 KB)

#2

Hi!

Do you want Axure to figure out whether the the user intends to drag horizontally or vertically, and then restrict drag to that direction? That’s possible, but it takes a bit of work. First, some important concepts

  • The OnDragStart message fires as soon as Axure senses a drag
  • The OnDrag message fires constantly the whole time you’re dragging, whether or not you actually move the dynamic panel within the OnDrag event
  • The dynamic panel properties TotalDragX and TotalDragY return how far (in an x or y direction) you’ve dragged since you began dragging – again, whether or not you actually move something in the OnDrag event

We can determine which axis the user intends to drag upon by checking whether the absolute value of TotalDragX is greater than that of TotalDragY (or vice-versa). Unfortunately, it’s not very reliable to test this upon the very first OnDrag message, because a directional trend has not necessarily been established yet. E.g., the first teensy movement may be primarily in the x direction, but a bit later it might straighten out to reveal a predominantly y direction.

So the strategy is this: wait until several OnDrag events have fired before checking if TotalDragX is greater than TotalDragY, and only then start moving the panel along the desired axis. I find by the 4th or so OnDrag message this test is pretty reliable. (Experiment with that number if you like.)

Because of that, we can’t use “move with drag,” as that will start dragging the panel immediately. Instead, we will store the initial position (start x and start y) of the panel OnDragStart, and then on drag, if we’re dragging along the x axis, move the panel to start x + TotalDragX (or to start y + TotalDragY if dragging in the y direction)

Here is some pseudocode:

OnDragStart
  set v_dragCount to 0
  set v_startX to the panel's x position
  set v_startY to the panel's y position

OnDrag
  increment v_dragCount
  IF v_dragCount equals 4 AND the absolute value of TotalDragX is greater than that of TotalDragY
    set v_dragDirection to 'x' 
  ELSE IF v_dragCount equals 4
    set v_dragDirection to 'y'
  IF v_dragCount is greater than or equal to 4 and v_dragDirection is 'x'
    move panel's x position to v_startX + TotalDragX
  ELSE IF v_dragCount is greater than or equal to 4 and v_dragDirection is 'y'
    move the panel's y position to v_startY + TotalDragY

Note that you can still put boundaries on the Move to command, to keep if from dragging further in any direction than you want it to.

I updated your file:

Live sample

File: dragLock_rp8.rp (134.9 KB)

#3

Forgot to answer you, but Thank you very much! This is amazing :slight_smile:

closed #4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.