Draggable Proxy and clickable children

[joris-rotteveel 18 Likes (Newbie)]

Hi guys,

 

looking at the docs (https://greensock.com/docs/v3/Plugins/Draggable), setting either

dragClickables:true

or adding the data attribute on the HTML element you want to be clickable

data-clickable="true"

would make the browsers default behaviour take precedence. However, using the proxy approach, the draggable is only an empty div.

Are there best practises on making children clickable in this case? 

 

One solution that came to mind was to find the closest element based on it's x/y position and the click x/y , but hopefully there is a smarter way of doing this?

 

See the Pen jOPMdKL by joris-rotteveel (@joris-rotteveel) on CodePen

[ZachSaucier 7,152 Likes (Superhero)]

Hey Joris and welcome.

 

You've got a couple of JS error in the bottom part of your JS. 

 

I'm curious - why use a proxy at all in this case? Here's how I'd do it.

See the Pen QWbKYPO?editors=0010 by GreenSock (@GreenSock) on CodePen

[joris-rotteveel 18 Likes (Newbie)]

Thanks for spotting that error, updated the pen.

 

I will abandon the Proxy approach, it is clearly not  the right approach when dealing with regular DOM elements 🤦‍♂️. It will come in handy  when dealing  canvas/webgl and Draggable.

 

Thanks for the reply!

[thomas-12345 1 Likes (Newbie)]

On 2/20/2020 at 2:58 PM, ZachSaucier said:

Hey Joris and welcome.

 

You've got a couple of JS error in the bottom part of your JS. 

 

I'm curious - why use a proxy at all in this case? Here's how I'd do it.

 

 

@ZachSaucier I have seen carousel examples that include an empty <div class="proxy"/> element in the html, or use javascript to create a "proxy" element, then use that as the `Draggable.create(proxy, options)` Here's one you worked on (

). What is the purpose of the proxy? Where can I learn more about techniques like this?

[GreenSock 18,587 Likes (Superhero)]

The proxy technique is for when you want to make something draggable but do non-standard stuff with it, like infinite looping or leveraging the values elsewhere. The proxy is just an invisible element that you make Draggable and then in an onDrag() (or whatever), you can leverage the resulting x/y values for something else. Like if you need something to infinitely loop, the proxy might keep getting dragged all the way in one direction, but your "real" element loops back around because you're applying custom logic in the onDrag. 

[thomas-12345 1 Likes (Newbie)]

@Jack Got it, thank you!