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