Jump to content
Search Community

event.stopPropagation not working on Draggable

Oomph test
Moderator Tag

Go to solution Solved by Oomph,

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

Hi there,

 

I'm developing an application that requires nested draggable objects (draggables within draggables), however I'm running into issues. As far as I can understand from the docs, the linked codepen should work, allowing the child draggable to be dragged independently of the parent. This appears not to work as a result of the draggable events (mousemove etc) being attached to the document rather than the actual draggable element, so stopPropagation has no effect. If I understand correctly though stopImmediatePropagation should still work though based on the event attachment order.

 

I understand one solution would be to enable/disable the parent draggable based on child dragStart/dragEnd, however this doesn't work for me as I need to have a vertical-only draggable grandchild within a vertical-only draggable child within a horizontal-only draggable parent (complicated I know!), and dragging the grandchild horizontally should still trigger the parent draggable, but dragging it vertically should NOT trigger the child draggable. My current solution involves enabling/disabling the parent draggable based on scroll direction, however this results in a small amount of movement in the parent direction before it can be disabled.

 

The reason I'm asking is that this is a responsive app, and mobile is currently working fine as the Draggable code attaches touch events directly to the element, rather than the document, and works perfectly (with no movement of the parent element whatsoever). Is there a way to replicate this on desktop without breaking everything, potentially using stopImmediatePropagation? (I note in the code you've put "//attach these to the document instead of the box itself so that if the user's mouse moves too quickly (and off of the box), things still work.")

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

Link to comment
Share on other sites

  • Solution

For anyone reading this with a similar problem, the solution ended up being manually attaching mouse/touch handling events to the element you create the draggable on, and enabling/disabling any parent draggables from there.

 

Using event.stopPropagation on mousemove (native browser) or onDrag (GSAP) won't work for desktop. Enabling/disabling parent draggables in the onDrag event (GSAP) will work but seems to lag by a few milliseconds (potentially due to the GSAP internal event delegation system, not sure how it works), meaning you'll still see some movement on the parent draggable and it looks pretty bad. The only solution for desktop/mobile is to enable/disable parent draggables in the mousemove event (native browser), eg:

var element = document.getElementById('my-child-draggable');

Draggable.create(element, {});

element.addEventListener('mousemove', function() {
  if (conditionForStoppingPropagation) {
    parentDraggable.disable();
  }
});

element.addEventListener('mouseup', function() {
  parentDraggable.enable();
});
  • Like 1
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...