# Create a Draggable Element in JavaScript **URL:** \ **Category:** programming\ **Created:** [April 28, 2018, 5:27am UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149 "2018-04-28T05:27:37Z")\ **Posts on this page:** 20\ **Page:** 5
**Author:** ![Sarvinstyle\_Taba](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarvinstyle_taba/32/10446_2.png) [@Sarvinstyle\_Taba](https://forum.kirupa.com/u/Sarvinstyle_Taba)\ **Post date:** [January 29, 2020, 2:15pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/83 "2020-01-29T14:15:18Z")
Thank you so much, It is lifesaving. but please please please help me. How can I provide drag and drop with snap into place functionality ?? something like photoshop **Snap To** functionality Can you help me again?? ---
**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:** [January 29, 2020, 7:32pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/84 "2020-01-29T19:32:24Z")
For that level of functionality, I would suggest you look at the links prg9 has provided: [Create a Draggable Element in JavaScript](http://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/81) 🙂 ---
**Author:** ![Sarvinstyle\_Taba](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarvinstyle_taba/32/10446_2.png) [@Sarvinstyle\_Taba](https://forum.kirupa.com/u/Sarvinstyle_Taba)\ **Post date:** [January 30, 2020, 2:51am UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/85 "2020-01-30T02:51:56Z")
Thank you very much 🙏 🙏 🙏 ---
**Author:** ![kou\_soreach](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kou_soreach/32/11080_2.png) [@kou\_soreach](https://forum.kirupa.com/u/kou_soreach)\ **Post date:** [February 21, 2020, 8:09am UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/88 "2020-02-21T08:09:29Z")
Drag not working on mobile it can move outside from container. if we open on browser desktop no problem. ---
**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:** [February 22, 2020, 10:03pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/89 "2020-02-22T22:03:22Z")
Interesting! I will look into it shortly 🙂 ---
**Author:** ![E959](https://avatars.discourse-cdn.com/v4/letter/e/e9bcb4/32.png) [@E959](https://forum.kirupa.com/u/E959)\ **Post date:** [February 22, 2020, 10:51pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/90 "2020-02-22T22:51:18Z")
Hi, Kirupa! How do I make it so you can drag the circles between and around two boxes instead of around just one box? Thank you in advance! 😃 ---
**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:** [February 22, 2020, 11:32pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/91 "2020-02-22T23:32:03Z")
Can you clarify further? I am not following 😀 ---
**Author:** ![Jr\_May](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/jr_may/32/11218_2.png) [@Jr\_May](https://forum.kirupa.com/u/Jr_May)\ **Post date:** [March 12, 2020, 10:44am UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/92 "2020-03-12T10:44:07Z")
Hi Kirupa, Nice tutorial. It really helped me alot. But after dragging the divs and then resizing the window, the divs are not on the same positions anymore, as I am trying to get the perfect alignment with its parent div. I tried changing this line setTranslate = (xPos, yPos, el) =\> { el.style.transform = “translate3d(” + xPos + "%, " + yPos + “%, 0)”; }; into percentage. It works as I expected but the thing is as mentioned [here](https://stackoverflow.com/questions/50409008/css-transform-transition-using-%C2%B4px%C2%B4-more-smooth-performant-than-percentage) dragging and animations are terribly slow and awful with percentage, as it needs to be calculated for its relative position. Could you think of anyway to solve this? Thank you so much! ---
**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:** [March 12, 2020, 9:31pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/93 "2020-03-12T21:31:02Z")
Do you have an example or live demo? I’d like to see what exactly is happening, for when I resize the example in the tutorial, I am not seeing the position shifts. ---
**Author:** ![John\_A\_Davis](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_a_davis/32/11221_2.png) [@John\_A\_Davis](https://forum.kirupa.com/u/John_A_Davis)\ **Post date:** [March 12, 2020, 10:22pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/94 "2020-03-12T22:22:24Z")
I have to face the issue of my website {baleeted} the HTML code cannot work properly. Anyone help or guide me which is the best plugin I can you for my site ---
**Author:** ![Jr\_May](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/jr_may/32/11218_2.png) [@Jr\_May](https://forum.kirupa.com/u/Jr_May)\ **Post date:** [March 13, 2020, 7:17pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/95 "2020-03-13T19:17:29Z")
thank you for the response. I have solved my problem by using transform and scale methods. Thanks for this useful tutorial! ---
**Author:** ![SusanM](https://avatars.discourse-cdn.com/v4/letter/s/f04885/32.png) [@SusanM](https://forum.kirupa.com/u/SusanM)\ **Post date:** [April 4, 2020, 12:05pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/96 "2020-04-04T12:05:11Z")
Hi Kirupa, I would like to be able to make a simple game where I can drag an image to the correct image box to make it droppable, any other boxes will not be droppable for that image… for example I have three images, orange, strawberry, apple, and three colored boxes, red box (for the strawberry image to be dropped in), orange box (for the orange image to be dropped in) and green box (for the Apple image to be dropped in)… is this possible? I have searched high and low but I can’t find one that will work on iOS as well as PC. Thanks so much 🙂 (The red, orange, green boxes to be images as well, or or better still, contain letters like “RED” “GREEN” “ORANGE”) ---
**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:** [April 6, 2020, 6:09am UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/97 "2020-04-06T06:09:55Z")
That is doable with the code I posted earlier. The main work will be to ensure that the place you are releasing your dragged element on is indeed the right destination. This can be done by either checking if the coordinates intersect or by doing some eventing tricks. Does this help a bit? 😀 ---
**Author:** ![Philip\_Kirchhof](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/philip_kirchhof/32/11409_2.png) [@Philip\_Kirchhof](https://forum.kirupa.com/u/Philip_Kirchhof)\ **Post date:** [April 6, 2020, 2:18pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/98 "2020-04-06T14:18:57Z")
Hi kirupa, Thank you so much for that amazing code - it even works on a wix site. Is it possible to edit that original code that the circle you are moving is kind of like a flashlight and while moving you are revealing the background picture? ---
**Author:** ![SusanM](https://avatars.discourse-cdn.com/v4/letter/s/f04885/32.png) [@SusanM](https://forum.kirupa.com/u/SusanM)\ **Post date:** [April 6, 2020, 2:21pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/99 "2020-04-06T14:21:44Z")
hi Kipura, thanks… the problem is that I’m a newbie and not sure if I have got it right, I’ve tried adjusting your code, but it’s not exactly what I need… could you have a look at what I did in here [what it looks like](http://www.susyancrafts.com) Here is the code that I put in: (I don’t know how to paste in the code in here… I’ll put it up in my website above) ---
**Author:** ![Faizan\_Qureshi](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/faizan_qureshi/32/11464_2.png) [@Faizan\_Qureshi](https://forum.kirupa.com/u/Faizan_Qureshi)\ **Post date:** [April 14, 2020, 9:51am UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/100 "2020-04-14T09:51:11Z")
Thanks for great work. ---
**Author:** ![auhanlon](https://avatars.discourse-cdn.com/v4/letter/a/bbce88/32.png) [@auhanlon](https://forum.kirupa.com/u/auhanlon)\ **Post date:** [April 17, 2020, 11:49am UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/101 "2020-04-17T11:49:58Z")
kirupa. This code works great. I am trying to add a rotate with double click then drag the multiple items on the container. so far I can do one or the other but can not do both. I tried your rotate onclick function above with the drag but the rotate doesn’t work with the drag. Can you add rotation to each item on your latest code above? ---
**Author:** ![auhanlon](https://avatars.discourse-cdn.com/v4/letter/a/bbce88/32.png) [@auhanlon](https://forum.kirupa.com/u/auhanlon)\ **Post date:** [April 17, 2020, 1:04pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/102 "2020-04-17T13:04:19Z")
jmacky I copied the code as is and I can not get the items to rotate. They drag smoothly. Did you modify the code to get the click rotate to work? Thanks in advance. ---
**Author:** ![chelsea1](https://avatars.discourse-cdn.com/v4/letter/c/e36b37/32.png) [@chelsea1](https://forum.kirupa.com/u/chelsea1)\ **Post date:** [April 17, 2020, 7:45pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/103 "2020-04-17T19:45:40Z")
Hi Kirupa, This tutorial is fantastic! I am learning and it has been great to be able change colors and sizes and see how things work. My question is how can I add more items? .five . six etc.? I tried just writing it in and then adding to the div style, but circles five and 6 never show up when I put the code live. What am I doing wrong? Thanks! ---
**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:** [April 17, 2020, 11:27pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/104 "2020-04-17T23:27:10Z")
Hi @chelsea1 - welcome to the forums! Can you share your example? Did you add the HTML elements as well that map to the **.five** and **.six** selectors? [Previous page](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149.md?page=4) [Next page](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149.md?page=6)