GSAP Draggable - Save position after drag for later use.

[Manolis G]

Hello  😃

 

I'm building a Properties listing page and it has to have an SVG map with markers on the locations of the properties. 

 

The properties will be added  through a CMS so users need to be able to set the property's location on the map by dragging the marker on it.

 

What i'm not sure is how I can save the location of the draggable object in the onDragEnd function so I can use it to position the marker on the map when the user edits the property page in the CMS on a later date and eventually position all markers on the map in the front end. 

 

I have created a sample code pen. Since I cant give you access to the CMS, I added two maps in the code pen sample. The first one has the draggable object and the second is to achieve the positioning of the marker based on the dragged position in the first map. If you can show me a way of mirroring the position of the dragged marker into the the second map it would be really appreciated. 

 

In my implementation, I will save save the position of the dragged marker in an input field so I can use it later on. 

 

As a note: although the map has a fixed with in the pen, in the CMS and in the front end, its size will differ based on screen size. Aspect ratio should be the same though.

 

If anyone could help, it would be really appreciated. 

 

Thank you! 

See the Pen QWPyqEK by Manolis-Giouvanakis (@Manolis-Giouvanakis) on CodePen

[mvaneijgen]

Hi @Manolis G welcome to the forum!

 

I think you're looking for getBBox() https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox. The getBoundingClientRect gets you the coordinates for the current browser window, but getBBox gets you the the coordinates space of the current SVG. I'm not an SVG pro, but have the feeling this gets your closer to what you want. 

Quote

The SVGGraphicsElement.getBBox() method allows us to determine the coordinates of the smallest rectangle in which the object fits. The coordinates returned are with respect to the current SVG space (after the application of all geometry attributes on all the elements contained in the target element).

 

Edit: I'd looked some more at your pen, thought it was a fun challenge, but without your calculations it is already 90% there. It is the easiest to have things in SVG start out in the upper left corner that is 0,0 of the SVG and then when everything is loaded you can put it at any position you want, but then you don't have to convert any values. There still is a small offset which I can't seem to find, but probably with some debugging you'll have that fixed in no time. Hope it helps and happy tweening! 

 

See the Pen YzMwYxa?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[Manolis G]

Hi @mvaneijgen and thank you for looking into it. 

 

I think you were right in your first message. I cant use getBoundingClientRect as this is relevant to the viewport. That's why I tried to calculate the percentages in my initial code so it's relevant to the parent. But then I couldn't use these values to position the second marker. 

 

I tried using your suggestion  getBBox() but i keep getting the same coordinates even after moving the marker: 

 

 

See the Pen qBwbpRj by Manolis-Giouvanakis (@Manolis-Giouvanakis) on CodePen

 

 

Your pen although it works ok in the browser as both maps are there at the same time, I'm afraid i cant use it to save the location and load the marker later on as the viewport may be different so it will place the marker on the map based on its position in the previous screen. Hope this makes sense.

 

Any other suggestions would be more than welcome and appreciated!  

[mvaneijgen]

I knew it! Couldn't connect the dots, but I found a function of the forum that used getBBox and does some fancy calculation with it. I can't really test the different viewport sizes with this demo, but I think this is what you're looking for, seems to also fix the alignment issues. Hope it helps and happy tweening! 

 

See the Pen yLrevYM?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

 

Here is the topic if you want to do some more reading.

 

[Manolis G]

Thanks @mvaneijgen

 

This worked like charm!