Jan The Ran

Wow! Thank you so much! Let me know where to send the paycheck

Thank you. That makes sense! So basically I assume I have to calculate everything to SVG coordinates since that's what I get as input to the liveSnap function. How do I go about calculating the coordinates to return though? I seem to miss the mark quite a bit. Codepen added! https://codepen.io/zdzfzsdffdsaasdf/pen/ExaKORB

Hi. I am new to draggable and gsap. I want to set a draggable path element that is inside a SVG element and snap it once is near a certain position. Draggable.create(".piece", { //type:"x,y", type:"x,y", bounds:"#svg", onDragStart: this.onDragStart, liveSnap:{ points: this.snapIfPossible } } ); On my default view settings on my computer the width of the SVG is around 1k pixels. When I drag the element I get the payload object (point) containing an X and a Y of where I am dragging. However if I drag something from the far right to the far left on the SVG it says something like -200. So what unit is this and how do I compare it to pixels? (ps: trying to do this in vue) snapIfPossible(point){ if(!this.dragSource) return point; console.log(point.x, this.parentElement); for(var i=0; i<this.snapPoints.length; i++) { var snapPoint = this.snapPoints[i].getBBox(); var dx = point.x + this.dragSource.x - snapPoint.x; var dy = point.y + this.dragSource.y - snapPoint.y; var distance = Math.sqrt(dx * dx + dy * dy) if (distance < 100) { return {x:snapPoint.x, y:snapPoint.y}; } if(i === 0) { //console.log("dx", dx, "dragsource", this.dragSource.x, "snappoint", snapPoint, "point.x", point.x) } } return point; //otherwise don't change anything. },