Jump to content
GreenSock

Greg Stager

Creating Boundaries

Recommended Posts

Here is a question that I was pondering.

I was studying the applyBounds() for draggable objects.

This allows me to restrict objects  to  a particular area. Is there a way to restrict objects  from  an area?

In this sample pen - I can keep the three balls in the larger box just fine but what if I want to keep them from overlapping at any time - no matter where they are positioned in the box?  I'm not even asking that they push each other around but I would just need to drag around them rather than over them. Did I miss a simple thing somewhere?

(Just imagine three baseballs in a shoebox) They cannot occupy the same space at the same time.

image.png

See the Pen XWmJjeR by Arelwynn (@Arelwynn) on CodePen

Link to comment
Share on other sites

A couple similar threads. :)

 

  • Like 4
Link to comment
Share on other sites

Thank you.

I had done several searches using terms like prevent and overlap and found the hitTest pen but not those two threads.

I will investigate those as they look like what I am trying to figure out.

Link to comment
Share on other sites

Well...

I feel better that I wasn't missing something simple.

DOH!

  • Haha 1
Link to comment
Share on other sites

Yeah, I tinkered with a bit of that after @OSUblake posted his answers and demos, but my head started to overheat so I went back to my SVG comfort zone. 

  • Haha 1
Link to comment
Share on other sites

Pretty sure I used the word "complicated" in both of those threads. 😉

  • Haha 2
Link to comment
Share on other sites

Those are great @OSUblake !

 

There is so much amazing stuff on this forum when you dig around for it (its worth digging). Sometimes I head back into pages 300 to 400+ and just read old posts, you can discover all kinds of awesome stuff laying around.  👍

Link to comment
Share on other sites

Yeah, no kidding.

I will settle for some sort of drag rejection.

Like   

if (hitTest == true) {
  go back to start position;
}

else {
  stay where I drop you;
}

I was thinking maybe I could store the current x,y when I start dragging and tween to that same x,y if the hitTest is true.

Perhaps I will play with that concept.

Link to comment
Share on other sites

14 minutes ago, Greg Stager said:

I was thinking maybe I could store the current x,y when I start dragging and tween to that same x,y if the hitTest is true.

Perhaps I will play with that concept.

 

That might be a good enough solution. The only problem with that is that you might not be able to get objects butting up against each other. For example, if you're dragging something that is 10px away from hitting another object, and then on the next drag it's hitting that object, you will end up moving it back 10px back, leaving a little gap between them.

 

If you can live with that, then go for it. And if you are using circles, then using circle collision detection will work better than Draggable's hit test.

 

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

 

 

Link to comment
Share on other sites

8 minutes ago, Shrug ¯\_(ツ)_/¯ said:

There is so much amazing stuff on this forum when you dig around for it (its worth digging). Sometimes I head back into pages 300 to 400+ and just read old posts, you can discover all kinds of awesome stuff laying around.  👍

 

It seems like the number of good/interesting questions has dried up lately, so most of my good posts are several years old. Nowadays most questions are about scrolling, which don't interest me.

 

  • Like 1
Link to comment
Share on other sites

Yes I've sadly noticed that over time also. It used to be almost like GSAP code battles in every thread around here. 😄

  • Haha 1
Link to comment
Share on other sites

Just now, Shrug ¯\_(ツ)_/¯ said:

GSAP code battles in every thread around here. 😄

 

Ha, yeah! A good thread would have like 3 or 4 people coming up with unique and better solutions.

 

  • Like 1
Link to comment
Share on other sites

9 minutes ago, OSUblake said:

For example, if you're dragging something that is 10px away from hitting another object, and then on the next drag it's hitting that object, you will end up moving it back 10px back, leaving a little gap between them.

If I am using snap, I expect it will snap into position but if I drag it too far it will then need to tween back to the original position or do I expect too much there?

Link to comment
Share on other sites

1 minute ago, Greg Stager said:

If I am using snap, I expect it will snap into position but if I drag it too far it will then need to tween back to the original position or do I expect too much there?

Got a demo for us?

Link to comment
Share on other sites

snap will just "snap" it into a position. If you want to tween it into a position, then you would probably need to create a tween in the onDrag callback.

 

 

  • Like 1
Link to comment
Share on other sites

Just now, ZachSaucier said:

Got a demo for us?

 

Not yet. I am challenging myself with something special based on another post I was reading.

I am happy with the progress I made so far and was trying to figure out a way to prevent a dragged object from resting on top of another one but also have dynamic boundaries.

I do have a finished product that does not use gsap but uses a whole lot of variables and conditional statements and that requires clicking.

My goal was to recreate that project with gsap tools, minimize the logic, and implement dragging.

It is my project for the weekend.

Link to comment
Share on other sites

6 minutes ago, Shrug ¯\_(ツ)_/¯ said:

 

Those do appear to have some promising application - I will certainly investigate them further this evening.

Link to comment
Share on other sites

1 hour ago, OSUblake said:

Nowadays most questions are about scrolling, which don't interest me.

Those will all go away when the new plugin is released. ;)

  • Haha 1
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.
×