# 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:** 7
**Author:** ![kevinbrenkman](https://avatars.discourse-cdn.com/v4/letter/k/c5a1d2/32.png) [@kevinbrenkman](https://forum.kirupa.com/u/kevinbrenkman)\ **Post date:** [December 14, 2020, 3:12pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/126 "2020-12-14T15:12:19Z")
Hi kirupa, I used your script for dragable element in javascript. I see you are speaking of “when you are dragging your element really quickly, your pointer will leave the hit area of the element you are dragging.” In my site when I drag the cursor out of the image it doesnt drag aymore. I think maybe I did something wrong. This is the url: [https://jill-portfolio-cms.webflow.io/](https://jill-portfolio-cms.webflow.io/) I have tried to debug where it goes wrong but can’t seem to figure it out… Thank you in advance! ---
**Author:** ![rebecca873737](https://avatars.discourse-cdn.com/v4/letter/r/bc79bd/32.png) [@rebecca873737](https://forum.kirupa.com/u/rebecca873737)\ **Post date:** [February 2, 2021, 5:37am UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/127 "2021-02-02T05:37:14Z")
Hi Kirupa! I’m a beginner so this is probably a dumb question, but what code do you use to turn these draggable images into links? I’m stuck. ---
**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 2, 2021, 5:59am UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/128 "2021-02-02T05:59:17Z")
Hi Rebecca - welcome to the forums! There is no such thing as a dumb question 😛 Can you clarify which draggable images you are referring to? Do you mean the circular `div` elements in my example? Cheers, Kirupa ---
**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 4, 2021, 6:47am UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/130 "2021-02-04T06:47:07Z")
There are several ways you can do this. The easiest way may be to replace the `div` elements with actual images. Just be sure to maintain similar class names 😀 ---
**Author:** ![mrprainx](https://avatars.discourse-cdn.com/v4/letter/m/f05b48/32.png) [@mrprainx](https://forum.kirupa.com/u/mrprainx)\ **Post date:** [March 5, 2021, 2:32pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/131 "2021-03-05T14:32:39Z")
How is it even possible that I’ve found this treasure only in 2021?!? Thank you @kirupa. Any advice on how to target a class instead of an #ID? In this way we could have multiple draggable elements in different sections of a page. Thank you 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:** [March 5, 2021, 3:19pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/132 "2021-03-05T15:19:23Z")
Hi @mrprainx! Welcome to the forums 🙂 I posted a version of that here: [Create a Draggable Element in JavaScript](http://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/3) 😀 ---
**Author:** ![mrprainx](https://avatars.discourse-cdn.com/v4/letter/m/f05b48/32.png) [@mrprainx](https://forum.kirupa.com/u/mrprainx)\ **Post date:** [March 5, 2021, 4:00pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/133 "2021-03-05T16:00:09Z")
Thank you Kirupa. That’s great (and I’m already using it 😜) for dragging multiple elements inside a container. But what if one have multiple containers? In that case one can’t use that code because #container ID must be unique. Am I right? 🤔 ---
**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 5, 2021, 9:56pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/134 "2021-03-05T21:56:37Z")
OH! I totally missed that detail about multiple draggable regions. Do you need to drag an item between regions? Or will this item be contained to whatever region it is originally in? ---
**Author:** ![mrprainx](https://avatars.discourse-cdn.com/v4/letter/m/f05b48/32.png) [@mrprainx](https://forum.kirupa.com/u/mrprainx)\ **Post date:** [March 5, 2021, 10:14pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/135 "2021-03-05T22:14:17Z")
I’d say the latter. To make a standard example: I’ll have a page with two draggable images in a container, then some standard text, then another couple of draggable images inside another container, then some standard text etc. ---
**Author:** ![rellie](https://avatars.discourse-cdn.com/v4/letter/r/d26b3c/32.png) [@rellie](https://forum.kirupa.com/u/rellie)\ **Post date:** [March 27, 2021, 5:31pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/136 "2021-03-27T17:31:37Z")
Hi, Thank you! It works great. 😄 I’m using images for the draggable elements and as you suggested the following CSS (to make it work with images): .item img { pointer-events: none; } However I’d like to make the images clickable / linking to another webpage. Hope you can point me in the right direction. Cheers! ---
**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 28, 2021, 6:28pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/137 "2021-03-28T18:28:22Z")
You want the images to be both draggable and clickable? 😀 ---
**Author:** ![rellie](https://avatars.discourse-cdn.com/v4/letter/r/d26b3c/32.png) [@rellie](https://forum.kirupa.com/u/rellie)\ **Post date:** [April 2, 2021, 1:16pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/138 "2021-04-02T13:16:32Z")
Yes! And I found a way to make the images both draggable and clickable with the following library: [https://draggabilly.desandro.com/](https://draggabilly.desandro.com/) It works like a charm 😃 ---
**Author:** ![Mark\_Comora](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mark_comora/32/14102_2.png) [@Mark\_Comora](https://forum.kirupa.com/u/Mark_Comora)\ **Post date:** [April 4, 2021, 4:24pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/140 "2021-04-04T16:24:11Z")
hi kirupa actually i’m glad to see your tutorial and it’s really help me a lot. but i have a new work of code that i am looking for. about a draggable element and once you clicked the specifict div or element. it will set a layer over of all other element that not active to click. what i mean about is a z-index layering on a css ? once the specific target of div is active to clicked it will set it at the top of the layers, and once the mouse drop out the clicked div element, it will remain at the top of the layers. by the way one thing i noticed is everytime i put or add any element inside of a specific div they are also draggable. a tag also the button, they dragged separately. but what my intention is they are not draggable. they are content only of the draggable element. how i can fix that too? ---
**Author:** ![HansFred](https://avatars.discourse-cdn.com/v4/letter/h/9fc348/32.png) [@HansFred](https://forum.kirupa.com/u/HansFred)\ **Post date:** [April 5, 2021, 8:05am UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/141 "2021-04-05T08:05:51Z")
You mean, kinda like the Facebook Messenger bubble? like how it’s only draggable when held then clickable when tapped? ---
**Author:** ![Sally\_Burgess](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sally_burgess/32/14113_2.png) [@Sally\_Burgess](https://forum.kirupa.com/u/Sally_Burgess)\ **Post date:** [April 5, 2021, 3:06pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/142 "2021-04-05T15:06:43Z")
> [@rellie](#): > > Yes! And I found a way to make the images both draggable and clickable with the following library: [https://draggabilly.desandro.com/](https://draggabilly.desandro.com/)[worktime](https://www.worktime.com/) It works like a charm 😃 this is very cool, well done, thanks! 😄 ---
**Author:** ![squeakie](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/squeakie/32/8450_2.png) [@squeakie](https://forum.kirupa.com/u/squeakie)\ **Post date:** [April 16, 2021, 2:55pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/144 "2021-04-16T14:55:07Z")
Thanks for this tutorial, it has been a huge help in a rather complex project i am working on. I’ve now run into a bit of a roadblock. I now want to be able to rotate the element separately, which I can do, but once it’s rotated, the dragging ability isn’t working properly anymore. Do you know of a solution to this? Also, I’ve had to post this from my phone because my IP is blocked for some reason 😔 ---
**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, 2021, 1:01am UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/145 "2021-04-17T01:01:05Z")
Hi @squeakie! Welcome to the forums. Regarding the banned IP, can you message me the IP that shows up as blocked? You can also e-mail it to me at [kirupa@gmail.com](mailto:kirupa@gmail.com) 📧 Regarding the element rotation, what you’ll need to do is wrap the element you are dragging into another div element. The inner `div` element is what you rotate. The outer `div` element is the one you drag. This will keep the various rotation and position details separate. 🙂 ---
**Author:** ![squeakie](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/squeakie/32/8450_2.png) [@squeakie](https://forum.kirupa.com/u/squeakie)\ **Post date:** [April 19, 2021, 8:35am UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/146 "2021-04-19T08:35:55Z")
Hi @kirupa , thanks for the quick reply! It looks like my IP is no longer blocked! I’ve done what you suggested and wrapped it another div and that really helped. Now the only issue I’m facing is that when the element inside is rotated, the area that you can drag has changed and no longer is aligned with the boundaries of the rotated item. I hope that makes sense. Do you have any ideas on a solution for that? ---
**Author:** ![squeakie](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/squeakie/32/8450_2.png) [@squeakie](https://forum.kirupa.com/u/squeakie)\ **Post date:** [April 19, 2021, 10:13am UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/147 "2021-04-19T10:13:14Z")
Hi again, never mind my last question, I found a solution. I applied the dragstart event to the element inside, while applying the translate3d values only to the outer element. ---
**Author:** ![Pythonsegmenter](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/pythonsegmenter/32/14265_2.png) [@Pythonsegmenter](https://forum.kirupa.com/u/Pythonsegmenter)\ **Post date:** [April 20, 2021, 1:28pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/148 "2021-04-20T13:28:45Z")
I don’t see the need to set initialX & initialY to currentX & currentY in the dragEnd function. They are overwritten in dragStart anyway. I would also place xOffset = currentX into the dragEnd function instead of the drag function. No need to overwrite xOffset for every mouse movement. Only needed at the end. Just some suggestions [Previous page](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149.md?page=6) [Next page](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149.md?page=8)