Jump to content
Search Community

Draggable element not snapping

JGM.io test
Moderator Tag

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm trying to build a slide-out menu in an app that runs within an SVG tag and everything works except the grid snapping.

 

Codepen

 

I've tried using console.log(endValue) where the Codepen says alert() but it doesn't seem to get triggered. I was thinking that maybe snap was a feature inherited by the ThrowPropsPlugin (not using that) but I wasn't sure.

 

The idea is that the menu element (#testE) can slide halfway out of screen OR fully visible.

 

 

See the Pen XJpZBw by JGMio (@JGMio) on CodePen

Link to comment
Share on other sites

  • 6 years later...

I see.

Now I get into new trouble,  I want to draw the line decided by the two points(control points).

After adding the drawLine function be the callback for onDragEnd in Draggable.create, the snapping get strange

and I can not get the real coordinates for the two control points, so I have the wrong line.

See the Pen RzqMEq?editors=1011 by olddunk (@olddunk) on CodePen

Link to comment
Share on other sites

Hi! @OSUblake

Thank you for your helps. I had make it, this what I want.

I really don't understand what dose gsap.set mean for gsap.set(target, { x, y });

How can I get the information of it ?

I am really a newbie for vue and gsap, I hope I can learn more 

from green sock.

by the way I had forgotten my thanks to @Cassie

See the Pen RzqMEq?editors=0011 by olddunk (@olddunk) on CodePen

 

  • Like 2
Link to comment
Share on other sites

6 hours ago, oldDunk said:

really don't understand what dose gsap.set mean for gsap.set(target, { x, y });

 

Did you notice how I removed the cx and cy from the SVG? That command is setting the initial x and y transform for the points since that is what Draggable works with. See gsap.set()

 

The notion might be look a strange because it's shorthand.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#new_notations_in_ecmascript_2015

 

So it's the same thing as this.

gsap.set(target, {
  x: x,
  y: y
});

So for the first point, it's setting it to this.

gsap.set(target, {
  x: 100,
  y: 100
});

If you inspect the point, you'll see that it applies that to its transform matrix.

<circle transform="matrix(1,0,0,1,100,100)"></circle>

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Your bounds is set to the SVG, which is larger than your grid.

 

You can specify the bounds as an object.

 

Quote
bounds [Element | String | Object] - To cause the draggable element to stay within the bounds of another DOM element (like a container), you can pass the element like bounds: document.getElementById("container") or a jQuery object is fine too, or even selector text like "#container". If you prefer, you can define bounds as a rectangle instead, like bounds: {top: 100, left: 0, width: 1000, height: 800} which is based on the parent’s coordinate system (top and left would be from the upper left corner of the parent). Or you can define specific maximum and minimum values like bounds: {minX: 10, maxX: 300, minY: 50, maxY: 500} or bounds: {minRotation: 0, maxRotation: 270}.

 

return new Draggable(target, {
  bounds: {
    maxX: WIDTH,
    maxY: HEIGHT
  },
  ...
});

 

  • Like 1
  • Thanks 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.
×
×
  • Create New...