Question:I want to be able to drag and drop a group of objects (rect, text, circle, etc.) and get their new x,y position in order to keep them in that new position.
I’ve checked the documentation for
Konva.jSfor dragging a group, but with no luck.
What I did try is I can get the new relative
x,yposition for the group (
group.attrs.x, group.attrs.y) but it is not exactly the same as the real position of any of the object inside the group. I’ve tried to tweak it by incrementing
x,ybut still it is different for different size of objects (in case of text with different length).
In the above image,
+22was added to the new x and y respectively that I got from the group using
group.attrs.x, group.attrs.y, but the resulting
circle(dot) is different for two different objects (
I need to get (near) exact
x,yposition of the circle in this case. How can I do it?
I have included here a simple demo for dragging a group of objects, at the drop it is drawing a
x,ypositions. And there you can see the difference.
Answer:First thing that stands out is you are using
mouseoutas the dropped according to the documentation there is a
dragend, I think that is what we should be using on this case:
To get the position you are looking for you need to add the group and your rectangle, take a look at the example below, it should all make sense, let me know if you have any questions.
If you have better answer, please add a comment about this, thank you!