Jump to content
Search Community

Draggable unit?

Jan The Ran test
Moderator Tag

Recommended Posts

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.xthis.parentElement);
        
 
        for(var i=0i<this.snapPoints.lengthi++)
        {
            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.xy: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.
    },

 

 

 

Link to comment
Share on other sites

If your <svg> element has a viewBox attribute, then your SVG coordinates are probably transformed.

 

Check out this demo. The <svg> element fills the entire screen. The gray box, a <rect> element, fills the svg 100%. Any white boxes around it are to preserve the aspect ratio. If you can resize the screen to be 1000x1000, the SVG and Screen coordinates will match, otherwise the svg coordinates will be transformed. Moving your mouse into the white area to the left or above the gray box will result in a negative value.

 

See the Pen 5d84dcad3edc6da20354948dbcdf6489 by osublake (@osublake) on CodePen

 

Study that demo carefully. The strange coordinates has nothing to do with gsap or Draggable. It's just how svg works.

  • Like 4
Link to comment
Share on other sites

20 minutes ago, OSUblake said:

The gray box, a <rect> element, fills the svg 100%.

 

People have challenged me on this. I just say, look at the markup. Its width and height are set to 100%. Setting the <rect> element's width and height to 1000 would have the same effect.

 

<svg id="svg" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid meet">
  <rect id="svg-background" x="0" y="0" width="100%" height="100%" />
</svg>

 

 

  • Like 2
Link to comment
Share on other sites

3 hours ago, OSUblake said:

If your <svg> element has a viewBox attribute, then your SVG coordinates are probably transformed.

 

Check out this demo. The <svg> element fills the entire screen. The gray box, a <rect> element, fills the svg 100%. Any white boxes around it are to preserve the aspect ratio. If you can resize the screen to be 1000x1000, the SVG and Screen coordinates will match, otherwise the svg coordinates will be transformed. Moving your mouse into the white area to the left or above the gray box will result in a negative value.

 

Study that demo carefully. The strange coordinates has nothing to do with gsap or Draggable. It's just how svg works.

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!

 

See the Pen ExaKORB by zdzfzsdffdsaasdf (@zdzfzsdffdsaasdf) on CodePen

Link to comment
Share on other sites

Hi @Jan The Ran 

 

Now that I see what you're trying to do, I think this might be a little easier. Not sure why you're using d3 when you can just use querySelectorAll.

 

See the Pen d63bc6ee64346454fbbf6015ac196744 by osublake (@osublake) on CodePen

 

Note that I added a blueprint attribute to the pieces. And getBBox() can be really confusing once you start using transforms.

https://greensock.com/forums/topic/13681-svg-gotchas/page/2/?tab=comments#comment-72060

 

 

  • Like 2
Link to comment
Share on other sites

36 minutes ago, OSUblake said:

Hi @Jan The Ran 

 

Now that I see what you're trying to do, I think this might be a little easier. Not sure why you're using d3 when you can just use querySelectorAll.

 

Note that I added a blueprint attribute to the pieces. And getBBox() can be really confusing once you start using transforms.

https://greensock.com/forums/topic/13681-svg-gotchas/page/2/?tab=comments#comment-72060

 

 

 

Wow! Thank you so much!

Let me know where to send the paycheck :)

  • Haha 2
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...