Jump to content
Search Community

Draggable Proxy and clickable children

joris-rotteveel test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

  • 3 years later...
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?

Link to comment
Share on other sites

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. 

  • Like 4
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...