Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
JGM.io

Draggable element not snapping

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 post
Share on other sites

It looks like you just need to change "snap" to "liveSnap". "snap" is for snapping the end position when you're using throwProps (after the user flicks and a tween begins)

  • Like 2
Link to post
Share on other sites
  • 6 years later...

Hi there pal!

you've spelt livesnap wrong - It's camelCase - so it should be liveSnap

  • Like 4
Link to post
Share on other sites

Thank you for your help, it's so silly! I'm just a mathematical teacher from Taiwan who want to do some teaching tutorial online for children and a beginner for javascript.

  • Like 2
Link to post
Share on other sites

Doesn't matter how experienced you are, spelling mistakes will always get you. ☺️

We'd love to see your tutorials once you have them up and running - this sounds wonderful!

  • Like 1
  • Thanks 1
Link to post
Share on other sites

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 post
Share on other sites

Hi @oldDunk

 

I wasn't sure if you wanted the line to end at the points, or to continue on, but this should help you get started.

 

See the Pen oNWNWaX by GreenSock (@GreenSock) on CodePen

 

 

  • Like 1
  • Thanks 1
Link to post
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 post
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 post
Share on other sites

hi! @OSUblake:
 I found that 'bounds' in draggable dose not work, how can I fix it!
    thank you!

 

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

×