# Draggable Element

**URL:** <https://forum.kirupa.com/t/draggable-element/653163>\
**Category:** web dev\
**Created:** [August 22, 2022, 10:31am UTC](https://forum.kirupa.com/t/draggable-element/653163 "2022-08-22T10:31:08Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![philde](https://avatars.discourse-cdn.com/v4/letter/p/b77776/32.png) [@philde](https://forum.kirupa.com/u/philde)\
**Post date:** [August 22, 2022, 10:31am UTC](https://forum.kirupa.com/t/draggable-element/653163/1 "2022-08-22T10:31:08Z")

</div>

Hey guys,  
I found the following tutorial: [Create a Draggable Element in JavaScript | KIRUPA](https://www.kirupa.com/html5/drag.htm)

Is it possible to drag the circle and use left and top position in percent (%)? In this tutorial the circle use the transform property.

I need it to drag circles in a specific position to store the position into my database for a custom plugin. (Responsive Map)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 24, 2022, 10:49pm UTC](https://forum.kirupa.com/t/draggable-element/653163/2 "2022-08-24T22:49:04Z")

</div>

Hi @philde - sorry for the massive delay in responding to you.

You can accomplish the same results as top and left by using the transform property itself. Are you running into any issues storing the results?

Cheers,  
Kirupa 🙂

---

<div class="post-metadata">

**Author:** ![philde](https://avatars.discourse-cdn.com/v4/letter/p/b77776/32.png) [@philde](https://forum.kirupa.com/u/philde)\
**Post date:** [September 7, 2022, 6:48am UTC](https://forum.kirupa.com/t/draggable-element/653163/3 "2022-09-07T06:48:22Z")

</div>

Hey 🙂 it work’s perfectly.

Can you tell me how I must change the stylesheet? I will use the function on a svg map (germany) to drag circles for the different cities. The container is display:fixed and I think that is the problem because the transform position is not exactly.

I show you a picture.

 ![circles](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/8/7/87f4edf67badad24e96578b78376a7fa36363daa.jpeg)