Disable drag container when interacting with nested draggables

[paul_ngc 2 Likes (Newbie)]

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

[Diaco 1,999 Likes (Superhero)]

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

[paul_ngc 2 Likes (Newbie)]

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?

[OSUblake 18,538 Likes (Superhero)]

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

[Jonathan 5,394 Likes (Superhero)]

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!

[OSUblake 18,538 Likes (Superhero)]

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

[Jonathan 5,394 Likes (Superhero)]

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