Distinguish on click event whether element was dragged or not

[gobengo]

Food for thought. Let's say I have an element. A user may drag it about and drop somewhere else. They may also just quickly click on like they would a link. This element is being managed by Packery.

The question is, what's the best way to do different things for these behaviors? By default, the click handler will be fired whenever the element is dragged. But in the click handler you have no way to tell if the element was actually moved, or whether it was a quick-click.

A solution for this is to add a class to the element on 'dragMove', and remove that class only once you've done something after 'dragEnd'. Like packery's 'dragItemPositioned' event. The click handler fires between these two moments, so your click handler can check for that class and return early if it was recently dragged, so as not to fire 'quick click' behavior after a drag.

Is this the best way to accomplish this?

Example.

Add a 'was-dragged' class between dragEnd and dragItemPositioned:
https://github.com/gobengo/streamhub-packery/blob/master/src/main.js#L46

Return early in click handler if it was recently dragged:
https://github.com/gobengo/streamhub-packery/blob/master/examples/mediawall/index.html#L77

[desandro]

Right now, the best way to accomplish this is by measuring .dragPoint.x and .y after dragEnd. See http://codepen.io/desandro/pen/sGfhq The relevant code looks something like:

function onDragEnd( draggie ) {
  // compare movement
  var drag = draggie.dragPoint;
  var message;
  if ( drag.x === 0 && drag.y === 0 ) {
    message = 'click'
  } else {
    message = 'move'
  }
  console.log( message );
}

I realize this isn't the best API. I could add an additional event some like didNotDrag that would trigger after dragEnd when both dragPoint.x and dragPoint.y are below a threshold.

[JulianLaval]

Thanks for this neat solution. How can I ignore the click once the element has been dragged (something to place in the else statement, maybe)? In my case, I'm dragging links, and would rather not they be activated once the mouse drag is released.

[desandro]

@JulianLaval here's one way to do it. I'm using a handle, which is positioned behind the content elements. So when you do click on text, or a link, it won't drag. But if you click anywhere else, on the handle, it will.

http://codepen.io/desandro/pen/FxrEt

[JulianLaval]

Hi @desandro, thanks for the example. Unfortunately in my case the entire entire item functions as a link (div > a > img). I'd still like to drag it, simply ignore the click release once the element has been dragged and dropped, as to not trigger the link on drop. Any ideas on whether or not this would be possible?

[JulianLaval]

UPDATE

I ended up using a traditional handle superposed above the item, and it seems to do the trick marvellously. Probably more intuitive anyways. Thanks for your help!

[willdavidow]

@JulianLaval wondering if you can elaborate on your solution with the superposed handle - I'm trying the same thing, and the click on my .item (which needs to remain for clicks, but not drags) is still happening after the drag, even after canceling event bubbling.

I'd prefer not having to include extra markup (e.g. the 'handle') to do this, but if this is the only way and we're not going to get a way to just cancel the event being passed through, then it'll have to do :)

[netwire88]

Hi, how is this solved? I have a similar problem with the packery item has a regular href link. I'd like to prevent that from firing when dragging the packery item.

[temuri416]

@desandro

I found this: https://github.com/SimpleAsCouldBe/draggabilly - "This fork changes only one thing: how dragStart fires".

Maybe you could have a look at proposed solution and merge if it's good?

Thanks!

[desandro]

@temuri416 I've created a branch drag-start to track development See #13 (comment)

[desandro]

Draggabilly v1.2.0 has been released. It now triggers staticClick so you can detect when a click has occurred, rather than a drag. Give it a shot!

drag-start branch has been removed.

[temuri416]

Fantastic job, everything is working as expected! Thank you so much.