Jump to content
Search Community

Creating Boundaries

Greg Stager test
Moderator Tag

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

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

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

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

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...