Jump to content
Search Community

Draggable / edgeResistence

whisoer test
Moderator Tag

Recommended Posts

Hello guys!

 

I'm truly new using Draggable product and I'm having a problem that I didn't find any solution on web :(
I want to increase size to my container when the target hits the edge of.
Actually, I'm using edgeResistance and it work very well but instead, I need to start a function that verifies the size of container and increase X px to width or height (depends where it hits)

 

There's any option to verify when the target hits the edge and where (x,y)? Thank you

Link to comment
Share on other sites

Hey whisoer and welcome.

 

What is the end goal? Resizing the container means that you'd need to recreate the Draggable instance so it might not be the best solution if you can avoid it.

 

Also how are you foreseeing edgeResistance working with this functionality of increasing the container's size? If an element is dragged outside of the container, should it use edgeResistance or instead increase the container size?

  • Like 1
Link to comment
Share on other sites

5 hours ago, ZachSaucier said:

Hey whisoer and welcome.

 

What is the end goal? Resizing the container means that you'd need to recreate the Draggable instance so it might not be the best solution if you can avoid it.

 

Also how are you foreseeing edgeResistance working with this functionality of increasing the container's size? If an element is dragged outside of the container, should it use edgeResistance or instead increase the container size?

Hi @ZachSaucier! thank you for answer

 

I have a chatbot (well, I'm trying haha), so I'm using Draggable to user created and visualize all the workflow, but thinking that this workflow can be ridiculously big, I think about having a container with size fixed and when the target hits the edge I can increase some pixels to container or something like that;

I initially think about EdgeResistence, 'cause I was imagining that it has an event that should notify me when the target hits the edge;

Sorry about my English :( I'm not a fluence speaker and not even close to a good one

Link to comment
Share on other sites

Just now, whisoer said:

Sorry about my English :( I'm not a fluence speaker and not even close to a good one

You English is good! I haven't had any trouble understanding you so far.

 

1 minute ago, whisoer said:

I have a chatbot (well, I'm trying haha), so I'm using Draggable to user created and visualize all the workflow, but thinking that this workflow can be ridiculously big, I think about having a container with size fixed and when the target hits the edge I can increase some pixels to container or something like that;

I initially think about EdgeResistence, 'cause I was imagining that it has an event that should notify me when the target hits the edge

Thanks for the description.

 

I would suggest detecting if something it out of the Draggable bounds and increasing the size drastically (like 10x or something like that) if that happens. That minimizes the amount of times you will need to recreate things. You can detect if something is out of bounds using one of these methods (it's in GSAP 2 format but should be easy to convert to GSAP 3 - let us know if you need help):

 

  • Thanks 1
Link to comment
Share on other sites

Wow! Thank you for answer so fast!

 

I see that recreate the Draggable really not sound like the best solution. I'm considering maybe start the container biggest than im using now to avoid reacreate it and if happens i just increase the size drastically;

 

Thank you 4 help!

Link to comment
Share on other sites

2 minutes ago, whisoer said:

I see that recreate the Draggable really not sound like the best solution.

It would work perfectly fine for this! I'm just trying to help you set it up to prevent you from doing too much extra work :) 

 

2 minutes ago, whisoer said:

I'm considering maybe start the container biggest than im using now to avoid reacreate it and if happens i just increase the size drastically

I think that's a good idea.

  • Thanks 1
Link to comment
Share on other sites

I don't think you would have to recreate a Draggable. You just update it's bounds.

 

But here's a pretty easy solution if you only need it to expand right and down.

 

See the Pen ee55d77acf513de6cdb539b1bdc1a10d by osublake (@osublake) on CodePen

 

 

Expanding to the left and up would require a little more work as you would need to shift the positions of the container and box.

  • Like 3
Link to comment
Share on other sites

15 hours ago, OSUblake said:

I don't think you would have to recreate a Draggable. You just update it's bounds.

 

But here's a pretty easy solution if you only need it to expand right and down.

 

 

 

 

 

Expanding to the left and up would require a little more work as you would need to shift the positions of the container and box.

 

Ooh, that looks perfect to me, thank you!
I'll just remove the max sizes and try it with autoScrolling and see what happens!
Congrats for ur support, the best I've ever seen!

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