Draggable Bounds with rotating angle

[ppdemo 0 Likes (Newbie)]

Hi everyone!

Sorry, if the answer is already there, but I couldn't find it.

 

In the codepen example. I have two rectangle box.
Red color box have angle 45deg  and draggable with bounds. Blue color box has 0 deg.

if i tried to drag the Red box i.e, Blue box corner "a" hit in between Red box "e" & "h" corner points. it's want to act as boundary. same for other corners.

 

can you please help me to solve this...

 

Thank you! 

See the Pen qBJjypj by demo-ppad (@demo-ppad) on CodePen

[GreenSock 18,864 Likes (Superhero)]

The bounds feature is simple bounding box logic, not arbitrary shapes or rotated shapes. That kind of behavior requires WAAAAAY more processing (and code). Sorry, it's not supported. To do that, you'd need to implement your own logic in the onDrag. 

[ppdemo 0 Likes (Newbie)]

how to get the exact position (x,y) of Red and Blue box corner. So I can find the point hit between two points.

I tried getBoundingClientRect(). not working because of angle . can you please tell how to get the position (x,y) for each corners.

[GreenSock 18,864 Likes (Superhero)]

You could do the math with Math.sin(), Math.cos(), etc. or perhaps this method would make it easier for you: 

https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.convertCoordinates()

 

Another option is to put a 1px transparent <div> on each corner and then use getBoundingClientRect() on that. 

 

Good luck!

[ppdemo 0 Likes (Newbie)]

thankyou i'll check those...

[ppdemo 0 Likes (Newbie)]

Hi @GreenSock as your instruction. I created the corner points and its working well. also i'm getting the hit position when the redbox hit bluebox. but i don't know how to stop the draggable which is act like bounds. can you please help me to fix...

See the Pen wvYeRwV by demo-ppad (@demo-ppad) on CodePen

[GreenSock 18,864 Likes (Superhero)]

Sorry, @ppdemo, but this is way beyond the scope of help we can offer in these forums for free. I can say the current logic you're using is extremely inefficient. I definitely wouldn't implement it that way. I'd bet you could do the collision detection in at least a 10x more efficient manner (1/10th the CPU load). It's not a super simple thing to craft, though. 

 

The entire point of the liveSnap feature is for you to be able to do your calculations inside that function and then return the new snapped value so that it doesn't extend beyond where you want it. So if it's within the bounds, you can just return the original point. If not, you return the snapped/constrained point. It looks like you're doing absolutely nothing inside the liveSnap (always returning the unsnapped value), and then you're trying to run extra logic in the onDrag. I suspect you just need to do all that in the liveSnap function. 

 

Another approach would be to just get a transform matrix based on the rotation of the red or blue rectangles and run each corner's coordinate through that matrix so that you could then run a very simple min/max comparison. Think of it as if you grabbed both rectangles and rotated them both by whatever amount the red rectangle is, but in the opposite direction so it's completely unrotated. So you'd apply matrix calculations on each corner point accordingly. 

 

If you need more help, you can contact us for paid consulting services or post in the Jobs & Freelance forum. 

 

Good luck!