Jump to content
GreenSock

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

Disable drag container when interacting with nested draggables

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

Hi paul_ngc  :)

 

you can use one of these methods :

onDragStart:function(){ D[0].endDrag() } // D = Container draggable
// or
onPress: function(e) { e.stopPropagation(); }

 

pls check this out : 

See the Pen waxdOX by MAW (@MAW) on CodePen

  • Like 4
Link to comment
Share on other sites

  • 2 weeks later...

Hi Diaco,

 

sorry for the late reply. This works great. Thank you!

 

I'm just wondering what the difference between onPress and onClick is. OnPress is active as long as the click/tap is not released?

Link to comment
Share on other sites

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

Nice! I was too lazy to copy them. Too bad there's not an easy way to link to the different constructor properties.

Link to comment
Share on other sites

no worries Blake. i just save a bookmark to the docs in my browser for fast reference

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.

×