Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
PeterBrauner

Draggable with snap to edges of other divs

Recommended Posts

Hi,

 

This is my first post here and I'm a fresh member of the BusinessGreen Club.

I've just set to create a visual editor for creating multi zone (div) content for digital signage and GSAP seem to have the perfect set of tools for that.

I have used the example from the forum post below to get me started. This will move into our Angular app eventually and the divs will be angular components that the end user can drag in from a library of contents. 

 

So for my question, I'd like to be able to snap the divs edges and perhaps even corners/vertices to each other. I found the hitTest method but all examples I can find where snapping is involved is on centering a div on top of another "drop zone" div. 

 

Grateful for any help.

 

Link to post
Share on other sites

Have you checked the Draggable example here?

 

https://greensock.com/draggable/

 

If you check the boxes unter the window you might get what you want, at least if you want to use some kind of grid (can be quite granular.)

Otherwise the hitTest might offer a way to achieve 'snap to object' functionality.

Link to post
Share on other sites

Hey Peter and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Business Green membership! 

 

Draggable's snapping functionality should help a lot here. The docs should get you started. If you have a specific question let us know, and hopefully provide a minimal demo of your situation.

  • Like 1
Link to post
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.

×