Comments (24)
+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?
from draggabilly.
π
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:
- Makes it difficult to have different behavior between click and drag, as @geordiemhall points out
- Blocks default behavior on selects/checkboxes/etc. I understand you can make the handle a sibling (#37), but sometimes this isn't ideal.
You still working on this? Open to a fork?
from draggabilly.
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.
from draggabilly.
+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 :)
from draggabilly.
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;
}
from draggabilly.
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.
from draggabilly.
π
from draggabilly.
+1
from draggabilly.
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 :)
from draggabilly.
Works a treat, and is about as simple as could be. Thanks!! :)
from draggabilly.
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.
from draggabilly.
@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.
from draggabilly.
@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.
from draggabilly.
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.
from draggabilly.
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)... ?
from draggabilly.
@willdavidow This sounds similar to #19. Take a look!
from draggabilly.
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 ] );
}
};
from draggabilly.
Thanks, is this merged in v1.1.2 or should we take care of that in our own code?
from draggabilly.
This is likely to land in v1.2.0, which I am currently working on
from draggabilly.
@desandro Is there an ETA on 1.2.0? Looking forward to it.
from draggabilly.
+1
from draggabilly.
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!
from draggabilly.
Awesome, thanks a lot! Starting testing it :-)
from draggabilly.
Thanks David. Can't wait to try it.
On Mar 8, 2015, at 11:21 AM, David DeSandro [email protected] 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.
from draggabilly.
Related Issues (20)
- cannot drag vertically when container's height get very large
- Draggabilly drop target with Packery is always the first item's size HOT 1
- PointerCancel being called after dragMove
- click inside draggable container doesn't work on mobile devices HOT 1
- pass handle as element???... HOT 2
- Dragging not working properly when the containment is inside an Iframe. HOT 1
- Scalled container position issue HOT 1
- TinyMCE and Drag Conflict Issues
- Possible to retain the modified layout HOT 1
- npm import not find Draggabilly
- Avoid element to be dragged and define fixed height HOT 2
- I really need the function pause drag and continue drag with conditions
- Ths library rocks! Thanks
- Ability to set priority of style properties HOT 1
- Two or more sets of draggable items? HOT 1
- (Emitted error) Ignored attempt to cancel a touchstart event with cancelable=false, for example because scrolling is in progress and cannot be interrupted. HOT 1
- how to turn off prevend default on touch start?
- 移ε¨θΏη¨δΈδΌζΉεε η΄ ε€§ε°
- Prevent div from scrolling when dragging an item
- Drag with lerp
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from draggabilly.