Jump to content
GreenSock

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

Draggable steals jquery mousedown

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?

Share this post


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

Share this post


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. 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×