How to prevent dragging a sub element

[Abozanona]

I'm trying to add a menu for a draggable object. The menu has three options(three grey squares). I want the menu to always be on top of the draggable object(the red square), and I don't want to allow the user to drag using the menu. If the user clicks on the menu, I need to only execute a js function and not allow the user to drag it.

 

In order to position the menu always on top of the draggable object, I defined the menu inside the draggable object. But now I need to find a way to disable the dragging behaviour from the menu(the cursor and the ability to drag).

 

See the Pen BaEjMZo by abozanona (@abozanona) on CodePen

[mvaneijgen]

If you make your clickable elements elements that are recognized as clickable elements (eg button, which is also better of accessibility) you can set     dragClickables: false, and everything works as expected

Quote

Boolean - By default, Draggable will work on pretty much any element, but sometimes you might want clicks on <a>, <input>, <select>, <button>, and <textarea> elements (as well as any element that has a data-clickable="true" attribute) NOT to trigger dragging so that the browser’s default behavior fires (like clicking on an input would give it focus and drop the cursor there to begin typing), so if you want Draggable to ignore those clicks and allow the default behavior instead, set dragClickables: false.

 

You can also create your own clickableTest 

Quote

Function - Your Draggable may contain child elements that are “clickable”, like links <a> tags, <button/> or <input> elements, etc. By default, it treats clicks and taps on those elements differently, not allowing the user to drag them. You can set dragClickables: true to override that, but it still may be handy to control exactly what Draggable considers to be a “clickable” element, so you can use your own function that accepts the clicked-on element as the only parameter and returns true or false accordingly. Draggable will call this function whenever the user presses their mouse or finger down on a Draggable, and the target of that event will be passed to your clickableTest function.
 

 

This is all from the docs, so be sure to read through it once, just to get familiar with everything that is possible out of the box. Hope it helps and happy tweening! 

 

https://gsap.com/docs/v3/Plugins/Draggable/

 

See the Pen mdgVoEr by mvaneijgen (@mvaneijgen) on CodePen