Store x,y coordinates for draggable objects


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


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

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.


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?


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.