emit dragStart when element starts moving, not on pointer down event

[desandro]

This is consistent with jQuery UI Draggable. It makes sense, as it prevents moving logic from being triggered when it doesn't have to.

I'm running into a problem on a Packery+draggable demo, trying use just pointer events. When item is 'clicked' (pointer doesn't move), I want to do different logic.

Eh, this may be problematic in the long run.

[geordiemhall]

+1, also ran into this.
Had to make a custom firstDrag event that's fired as soon as dragMove is called

Could we add another event to listen for, that's only fired once dragging actually starts?

[SimplGy]

👍

I think you're right in the approach you suggest, @desandro. First event we hear from a dragging library should be when dragging actually starts. Browser already throws click and mousedown on its own.

Treating the first mousedown like a drag start has problems:

1. Makes it difficult to have different behavior between click and drag, as @geordiemhall points out
2. Blocks default behavior on selects/checkboxes/etc. I understand you can make the handle a sibling (How to make controls clickable #37), but sometimes this isn't ideal.

You still working on this? Open to a fork?

[desandro]

In a year since I opened this issue, there have been two positive responses. This helps, but I'm not likely to change the feature just yet.

[oisinlavery]

+1,

I think jQuery UI Draggable is doing it right here.
I'd rather keep Draggabilly stock than adding my own events.

Please take another look at this Desandro :)

[mr-mig]

I've jsut ran into similar issue: I need to differentiate between click and dragstart.

More specific, it would be great if I could control that the event is not prevented here:

if ( event.preventDefault ) {
    event.preventDefault();
  } else {
    event.returnValue = false;
  }

[oisinlavery]

In the end I opted to add a small handle to my draggable object as a workaround.

In the future it would be great to be able to click / drag the whole object without triggering conflicting styles.

[ornicar]

👍

[petergrice]

+1

[SimplGy]

I implemented the "wait to fire dragStart" functionality in this fork.

It's non-breaking, if you want the dragStart event to wait to fire until there's movement, just add dragOnMove: true when instantiating your draggable.

Let me know what you think :)

[petergrice]

Works a treat, and is about as simple as could be. Thanks!! :)

[willdavidow]

Running into this exact problem right now - need a way to differentiate between clicks and actual drags. I have some functionality that needs to happen only on click, but right now it's happening both on click and after a drag, because the events tied to click are still firing after dragging an element.

[SimplGy]

@willdavidow This is true.

I wrote a small fix that makes sure drag only fires if you actually start dragging, but click will still fire, as you say.

A better fix for most people (I think) would be to prevent the click event if a drag has happened. It's been about a month now so I don't remember exactly what that code looked like, but I remember thinking that the second part would be a bit nontrivial.

[mr-mig]

@willdavidow There is a couple of PRs attached to this issue. You can find a fix you like more. For example, have a look at my fix. I've added the tolerance parameter (the way it is done in jquery.draggable). The PR is not merged.

[desandro]

I've pushed a new branch drag-start. In this branch, dragStart will not be emitted until the first pointer move event. Try it out! If this helps, I'll merge it in to master.

[willdavidow]

Thanks @desandro, @SimpleAsCouldBe and @mr-mig - not emitting dragStart until a user actually begins dragging is definitely helpful for some things I need to add to the prototype I'm working on, but the issue with not being able to kill the click looms. Is there a way to cancel that click event that is being passed through? Nothing is working.

I've tried all of these in both dragStart and dragEnd:

e.returnValue = false; // nope
e.preventDefault() // nope
return false; // nope

Am I missing something (I probably am)... ?

[desandro]

@willdavidow This sounds similar to #19. Take a look!

[chiplay]

This works to solve my issue as well! 👍

I would also add this to the dragEnd so that any libraries built on top of draggabilly have a consistant event API with dragEnd only getting called when items are dragged:

/**
 * drag end
 * @param {Event} event
 * @param {Event or Touch} pointer
 */
Draggabilly.prototype.dragEnd = function( event, pointer ) {
  delete this.pointerIdentifier;

  // use top left position when complete
  if ( transformProperty ) {
    this.element.style[ transformProperty ] = '';
    this.setLeftTop();
  }

  // remove events
  this._unbindEvents();

  if ( this.isDragging ) {
    this.isDragging = false;

    classie.remove( this.element, 'is-dragging' );

    this.emitEvent( 'dragEnd', [ this, event, pointer ] );
  }
};

[netwire88]

Thanks, is this merged in v1.1.2 or should we take care of that in our own code?

[desandro]

This is likely to land in v1.2.0, which I am currently working on

[temuri416]

@desandro Is there an ETA on 1.2.0? Looking forward to it.

[rickhall]

+1

[desandro]

Draggabilly v1.2.0 has been released. Draggabilly now triggers dragStart when dragging first starts and pointerDown on mousedown/touchstart/pointerdown. There's also a staticClick triggered to easily detect click/tap events. Give it a shot!

[temuri416]

Awesome, thanks a lot! Starting testing it :-)

[netwire88]

Thanks David. Can't wait to try it.

On Mar 8, 2015, at 11:21 AM, David DeSandro notifications@github.com wrote:

Draggabilly v1.2.0 has been released. Draggabilly now triggers dragStart when dragging first starts and pointerDown on mousedown/touchstart/pointerdown. There's also a staticClick triggered to easily detect click/tap events. Give it a shot!

—
Reply to this email directly or view it on GitHub.