Jump to content
Search Community

Disable drag container when interacting with nested draggables

paul_ngc test
Moderator Tag

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

Is it possible to ignore all events on a drag container ( type = scroll ) when I drag a nested element ( type = x,y )?

When I use dragContainer[0].disable(); the container resets the position to 0,0.

 

I tried to disable interaction with dragContainer during the onDrag event from a nested element, but no success.

 

edit:

I've added a pen. So when you drag the yellow container around you will see some images. When I drag those images (nested draggables) you will see that the container is moving as well. When you uncomment #111 & #116 you will see that the disable/enable is making trouble somehow.

See the Pen gpjWBX by anon (@anon) on CodePen

Link to comment
Share on other sites

  • 2 weeks later...

For the most part that is correct, but a click event does not always fire. There is a minimumMovement value that determines the threshold to start dragging (default = 2px). So if you click on a draggable and the mouse moves more than 2px, that will be considered a drag and a click event will not fire.

 

Also note that there are properties on a draggable you can use to check it's state.

.isPressed
.isDragging
.isThrowing
  • Like 3
Link to comment
Share on other sites

To add to OSUblake's great advice!

 

Here is a link to the GSAP Draggable API Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/Draggable/

 

Below is taken from the Draggable Docs:

  • 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.
     
  • onRelease : Function - a function that should be called as soon as the mouse (or touch) is released after having been pressed on the target element, regardless of whether or not anything was dragged. Inside that function, "this" refers to the Draggable instance (unless you specifically set the scope usingonReleaseScope), 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, the pointerEvent(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.

Hope this helps! :)

  • Like 2
Link to comment
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.
×
×
  • Create New...