Jump to content
Search Community

Draggable Bounds with rotating angle

ppdemo test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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!

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