Store x,y coordinates for draggable objects

Hi

In my app a user should have the ability to place from 1 to 10 draggable objects in an area, and also reposition them.
The problem is that the object should keep their positions next time when the app will open.
Next I will describe how I thought achieving this:

For this purpose I am using a Dropzone that will cover most of the screen and a DraggableGroup.

1.) Store x,y coordinates in Database when click on the Dropzone area.

First we have to check the new field in the DroppableGroup A / Apearance (this feature should be included)

From Workflow click on ā€œClick here to add an eventā€¦ā€
From Elements click on ā€œDrop area is clickedā€ (this feature should be included)

Then choose Dropzone A

Add an action from Data(Things ) / Create a new thingā€¦
Create a new Type, in my example ā€œPositionsā€ / Set a field to store X coordinate and from the dropdown list select DroppableGroup A.
Now because we checked ā€œStore X,Y coordinateā€ in the Properties Panel at the beginning two new options will be available to choose from: ā€œX coordā€ & ā€œY coord. (this feature should be included)

2.) Move the DraggableGroup to its new position.

For this we have to:
Add an action from Element Actions / Move a draggable group.
Select Element DroppableGroup A / Element to move to Dropzone A
And the 2 fields Offset top and Offset left should have the property to Insert Dynamic data so they can search the database. (this feature should be included)

After that we can create a new event for when Page is loaded, with the same properties as above to keep the new positions for the draggable objects next time when the app will be opened.

Probably there is a better solution to solve this problem, but whatever that will be it will help me very much in developing my app.
So please add this feature, if you think itā€™s possible and if it doesnā€™t involve much too work from your side.

Thank you

5 Likes

That would be a great addition. And if dynamic values for the draggable element height/width could also be implemented, we could have basic graphic capabilities up and running. And if users could be allowed to create them dynamically, it would be even better.
In my case Iā€™m thinking about users being able to create a scheme/drawing of their premises and show the IoT devices on there with relevant statsā€¦ That would be sooo great!

1 Like

Hey Guys,
I need to implement these kind of functionality for one of my upcoming plugin, have you guys already done this functionalities earlier?

Thanks & Regards
Aditya

I am very interested in finding a way to save the coordinates of a drag/drop group after it is dropped in a dropzoneā€¦I think it would really help out with various features of peoples apps.

Hey all,

Iā€™m wondering if this ever got solved? Iā€™m also trying to get functionality where users can drag and move objects within an area, similar to k-alex. It would be great if someone figured this out. Thanks.

Matt

Late to this but I was looking for a similar solution. Given a draggable object (TheDrag), in my workflows, I created a workflow using ā€œDo when a condition is trueā€. I set it to run ā€œEvery timeā€ only when TheDrag is dragged is ā€œnoā€. Then I added an action to store TheDragā€™s X position and Y position. For me, this was in two custom states for the object (x and y) but eventually it will be stored in the database so when a user logs in object positioning can be maintained. This workflow will trigger every time you let go of an object you are dragging. In my case Iā€™m using it to snap draggable UI elements to a grid by moving the object in that same workflow to x and y positions reduced by its coordinates ā† modulo ā†’ the grid division size in pixels.

Would you be willing to share an example of how you have this set up?

Do you need a kind of this one?

Editor:

I will as soon as I get a chance to carve that functionality out as an example so thereā€™s not a lot of other code in the way.