Updating Draggable type once threshold is met

[jh3y]

Howdy y'all 🤙

 

I thought this was doable and could've sworn I'd done it somewhere before.

 

But, what's the best way to update a Draggable type on the fly? I had assumed updating the `type` on the fly might work. But, it doesn't. I can update the bounds as expected. Can't remember if I need to do this with a proxy or something instead.

 

const Dragger = Draggable.create('.drag', {
  type: 'x',
  allowContextMenu: true,
  bounds: {
    left: 0,
    right: 1000,
  },
  onDrag: function (event) {
    // Update bounds and types based on drag distance
    if (this.x > 200) {
      this.type = 'x,y'
      this.vars.type = 'x,y'
      // Bounds update as expected
      this.applyBounds(document.body)
    }
  },
})

 

Thanks for your help in advance! 🖤

 

– Jhey ʕ•ᴥ<ʔ

 

__UPDATE::__ Looks like in previous demos I've used a proxy drag with a trigger and hooked into the `x` or `y` value until a threshold is met. Then I would open up to using other values. But, would be nice to be able to update the `type` on the fly. Happy to close this one though 🤙

Edited October 10, 2023 by jh3y

[GreenSock]

Howdy, @jh3y! 

 

Yeah, there are a bunch of up-front tasks that we do in Draggable based on the type to maximize performance, and honestly I don't think I've ever heard of a scenario where someone wanted to change the type of Draggable after creating the instance so it never even crossed my mind to make that a capability. 

 

But if you're trying to do something very dynamic, you could definitely use a function-based liveSnap value so that you can put whatever logic in there that you want in order to limit the x/y position(s) as the user drags. 

 

If you want some help with that, feel free to toss a CodePen up here with a minimal demo and we'd be happy to lend a hand. 

 

Oh, and thanks for the very kind shout-out on social media about the new web site. It has been a massive undertaking for us. It's so nice to have it launched and in the wild. Your positive comments meant a lot. 💚