Onclick with ondrag actions

Is it possible to have a dynamic panel that has both an onClick and an onDrag case? Currently mine isn’t working with both. With both assigned, the Ondrag works, but the onClick doesnt. If I remove the onDrag the onClick works.

Any ideas?

Thanks

+1

I am having the same issues

Hi,

You can assign both an OnDrag and an OnClick event but they will be treated separately, i.e. if you drag the widget the OnClick won’t fire, but if you just click it without dragging, the OnClick fires.

If you need both of these to fire at the same time, try using the OnMouseUp or OnMouseDown events depending on if you want the click to fire on grab or on drop.

Does that answer your question?

Hey Tuomas,

I experience the same problem in Chrome but not in Firefox.
In Chrome only dragging works. In Firefox both dragging and clicking works

Here is an example file for the problem:

clickDragProblem.rp (59.7 KB)

BTW, this seems to be the same bug mentioned here:
OnDrag breaking onClick in sub panel

Cheers
l.

Hi Lennart,

Hmm, I gave it a shot with your test file but both Firefox and Chrome are behaving the same on my machine (OS X). On both, the click works on my machine if the button is clicked without dragging at all. I take it your “click me” button isn’t responding in Chrome even though you’re not dragging the panel?

What version of Chrome are you currently using? Also, what build of Axure RP are you using and what OS are you running? It looks like this issue happens a bit inconsistently, but hopefully we can reproduce it and fix whatever is causing this to happen for you guys!

Hey Alyssa,
thanks for the reply.

But I just checked again - I cannot reproduce it either.
The bug occured on Windows 7 Enterprise. On my Mac it works, too.
Strange…

Best
l.

Hi Lennart,

Thanks for updating us! It’s odd that the issue stopped happening. We’ll keep an eye out and see if we can find clues about why this happens and when, but if you happen to stumble upon anything that may help feel free to let us know!

sure. will do.

I am having a similar problem, but only when using touch interaction on a tablet. Here is the situation:

  • I have a dynamic panel with a lot of stuff inside. Many of the widgets in the DP implement OnClick
  • I have implemented OnSwipeLeft and OnSwipeRight on the DP to which will move an internal DP to the left or the right to get a windowing effect

This works beautifully when using a mouse to simulate swipes and taps. If, however, I put the prototype on a tablet (I have tried a Surface and a Motion R12) and use my finger instead of the mouse, the results vary depending on the browser I use:

IE: the swipe interactions on the DP work, but the “tap” interactions for the elements contained in the DP do not
Chrome: the tap interactions work, but the swipe does not

I have been unable to try with Firefox.

A little digging into using IE shows that when I tap with my finger, the DP will not register an OnClick event but does register OnMouseDown, OnDragStart, OnDrag, and OnDragDrop. So it’s treating it as a drag event instead of a click event. If, however, I remove the cases from the swipe events, the click events do fire and everything works again (except I obviously can’t swipe). A little more testing shows that implementing the OnDrag event does the same thing, i.e. prevents the OnClick of the contained elements from firing.

I haven’t found a workaround. Maybe it will work with Firefox if I can convince IT to allow me to put it on. What would be nice is a setting to allow one to configure the drag vs click sensitivity so that containing DPs don’t consume the event before it has a chance to get to the contained widgets.

Hi Centacre,

Thanks for informing us. That’s correct–there are some known issues with touch gestures for Chrome and FF on the Surface, though we haven’t had much experience with the Motion R12. We’d be happy to look into this further nonetheless.

It is odd, though, that IE still produces the conflict. As mentioned in another forum thread, we’d typically expect IE 11 on the Surface to work in a normal way.

If possible, would you mind sharing your RP file with us? It might help shed some light on this issue as we do more testing. Thanks!

Alex

I’m having the same issue. Onclick in the dynamic panel doesn’t work if the Ondrag event is enabled for the panel. Was there a solution to this? I’ve looked, but couldn’t find anything.

Hi John,

What browser and operating system are you using? Have you tried the same prototype in a different browser? Additionally, is this specifically on a mobile device, or are you seeing it across different device classes?

Thanks!

Just encountered the same problem after about 2 hours of trying to figure what did I do wrong…

Until yesterday it has been working just fine on Chrome. Now it doesn’t work with Chrome (does not recognize the OnClick event, only OnDrag).

Works fine on Edge, though.

Hi Dotan,

Could you share the RP file here so that I can see what’s going on? I just did a quick test of a click and drag in Chrome, and it looks like it’s working from my end. If you could also let me know the OS and Chrome version you’re running, that’d be helpful as well. Thanks!

I’m getting the same issue.

I have a DP with OnClick and OnDrag assigned to it and when I click the DP OnDrag is executed, OnClick isn’t actioned.

I’ve attached an example file (click the blue DP which should open page 1 but it reveals a Red DP instead, which belongs to the OnDrag action).

Works fine in FF (not my or my clients go to browser).

Doesn’t work in Chrome (Version 50.0.2661.102 m) on Window 7 64-Bit.
OnDrag-OnClick.rp (58.9 KB)

Hmm, I tested your file in FF and Chrome (both Windows 8.1 and OS X) as well as Safari, but the OnClick and OnDrag actions are behaving correctly for me. That is, clicking on the panel while the mouse is completely still correctly fires the OnClick action and opens a new page, and dragging the mouse while holding the left click shows the red/maroon panel. This was tested in 8.0 3297 with the same version of Chrome that you have (50.0.2661.102, but no “m”). I take it this is happening for you on the latest build of 8.0? Is the behavior any different if you try viewing in IE or on a mobile device?

I am having the same issue. I am using Windows 7 Enterprise with Chrome browser version 51.0.2704.63 m. OnDrag works, OnClick is not recognized. I tried it on FF and both OnClick and OnDrag work just fine.
Maybe the following will help you in pointing out the problem:
Originally I created two repeaters ABC and XYZ. ABC has 10 images, while XYZ nothing.
ABC images are clickable, and once an image is clicked it gets copied into XYZ. This worked just fine, until I put both repeaters under a Dynamic Panel call it DPx, where I had to do multiple clicks on the same image of ABC for a single click to be recognized.
Then I created another Dynamic Panel that contained some widgets and the above mentioned Dynamic Panel DPx. At this point it was getting more difficult to get a click recognized when clicking ABC images.
Then I added OnDrag to the outer (parent) Dynamic Panel where I can drag ABC images. OnDrag works, but Onclick is no longer recognized under Chrome browser.

What version and build of Axure RP are you using? Are you still seeing this behavior now, and can you reproduce it in a fresh file? If you can reproduce it in a new file and not just in the original, would you mind posting the test file so that we can take a look and see if the same file causes conflicts with dragging and clicking on our end?

1 Like

I am using Axure 8.0.0.3297

Yes I’m still seeing the behavior, so I switched to FF

I will try to make a test file this weekend if times allows

I had the same issue. Working with FF but not with Chrome 61 on Windows 10.
I updated to Chrome 62.0.3202.89. Now it works.