Draggable element not snapping

[JGM.io 0 Likes (Newbie)]

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

[GreenSock 18,254 Likes (Superhero)]

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)

[JGM.io 0 Likes (Newbie)]

Thanks !

[oldDunk 5 Likes (Newbie)]

Snap can't work for svg tag in my project too!

See the Pen RzqMEq by olddunk (@olddunk) on CodePen

[Cassie 5,128 Likes (Superhero)]

Hi there pal!

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

[oldDunk 5 Likes (Newbie)]

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.

[Cassie 5,128 Likes (Superhero)]

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!

[oldDunk 5 Likes (Newbie)]

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

[OSUblake 18,475 Likes (Superhero)]

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

 

 

[oldDunk 5 Likes (Newbie)]

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

 

[OSUblake 18,475 Likes (Superhero)]

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>

 

[oldDunk 5 Likes (Newbie)]

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

 

[OSUblake 18,475 Likes (Superhero)]

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
  },
  ...
});

 

[oldDunk 5 Likes (Newbie)]

@OSUblake:

    it works, thank you!