Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
nickbarfuss

Draggable steals jquery mousedown

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm using Draggable to create scrollable element with several divs inside it. For example

 

<div id="draggable">
     <div>example</div>
     <div>example</div>
     <div>example</div>
</div>

 

I want to apply some mousedown jquery code to the divs. for example:

 

$("#draggable div").on("mousedown", function() {
     //do something...
});

 

The Draggable seems to overwrite and/or steal jQuery's mousedown event. 

 

If I disable the Draggable then  there is no issue.

If I apply some click jquery there is no issue either. for example:

 

$("#draggable div").on("click", function() {
     //do something...
});

 

I do need to use the mousedown event in this scenario.

 

Has anyone encountered something similar, or does anyone have a solution?

Link to post
Share on other sites

Whenever I use Draggable on an element I simply use all of its events. Perhaps you could use the onClick or onPress event(s) of Draggable? There's also onDragStart, as well as others that should allow you to accomplish what you need.

 

https://greensock.com/docs/#/HTML5/Drag/Draggable/


 

Quote

 

onClick : Function - a function that should be called only when the mouse/touch is pressed on the element and released without moving 3 pixels or more. This makes it easier to discern the user's intent (click or drag). Inside that function, "this" refers to the Draggable instance (unless you specifically set the scope using onClickScope), making it easy to access the target element (this.target) or the boundary coordinates (this.maxX, this.minX, this.maxY, and this.minY). By default, thepointerEvent (last mouse or touch event related to the Draggable) will be passed as the only parameter to the callback so that you can, for example, access its pageX or pageY or target or currentTarget, etc.

 

onPress : Function - a function that should be called as soon as the mouse (or touch) presses down on the element. Inside that function, "this" refers to the Draggable instance (unless you specifically set the scope using onPressScope), making it easy to access the target element (this.target) or the boundary coordinates (this.maxX, this.minX, this.maxY, and this.minY). By default, thepointerEvent (last mouse or touch event related to the Draggable) will be passed as the only parameter to the callback so that you can, for example, access its pageX or pageY or target or currentTarget, etc.

 

 

  • Like 3
Link to post
Share on other sites

Thanks OSUblake.

This got me on the right track. Now all the content inside of the draggable can have jquery listeners attached. Thanks!

 

I'm now seeing why allowEventDefault is not set to true by default, because now all the content gets mousedown and click when i click and drag. But I guess that is another problem to figure out on my end. 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×