# Create a Draggable Element in JavaScript
**URL:** https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149
**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:** 2
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 15, 2018, 10:54pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/22 "2018-11-15T22:54:21Z")
You can just store the `transform` **X** and **Y** values on each element to get the same result. I don’t recommend using the the `top` and `left` properties for performance reasons.
---
### Author:  [@mafiamaria](https://forum.kirupa.com/u/mafiamaria)
#### Post date: [November 21, 2018, 9:12am UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/23 "2018-11-21T09:12:12Z")
Thank you for your response, now it is much easier to drag 🙂 But now I have a new problem - I can’t get the file to scale. The settings I had before I placed the url(filehere) in css, was that the element should be 60% of the windows width, but not bigger than 363px (width: 60%;, max-width: 363px;). That worked when I had the img src in html, but not now when I need the image file to be in css. I tried to place the img src in between the div in html, but then my original problem occurs (you have to click once more to let the item go). I tried making a container around the div as well, but it still doesn’t work. Now it looks like this:
#containerElement1 {
position: relative;
max-width: 363px;
max-height: 139px;
width: 60%;
height: auto;
}
#element1 {
background-image: url(illustrasjon/nase1.png);
display: block;
width: 100%;
height: auto;
}
---
### Author:  [@mafiamaria](https://forum.kirupa.com/u/mafiamaria)
#### Post date: [November 23, 2018, 2:55pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/24 "2018-11-23T14:55:16Z")
Correction, this is how it looks like in the css file:
#containerElement1 {
position: relative;
max-width: 363px;
max-height: 139px;
width: 60%;
height: auto;
}
#element1 {
background-image: url(illustrasjon/nase1.png);
display: block;
width: 263px;
height: 139px;
}
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 23, 2018, 4:16pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/25 "2018-11-23T16:16:45Z")
Do you have the example hosted anywhere that we can take a look at? 🙂
---
### Author:  [@mafiamaria](https://forum.kirupa.com/u/mafiamaria)
#### Post date: [November 24, 2018, 11:39am UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/26 "2018-11-24T11:39:06Z")
Here is the webpage: [http://folk.ntnu.no/manordt/wu1/Heimeside/framside.html](http://folk.ntnu.no/manordt/wu1/Heimeside/framside.html)
The code is a bit messy now because I have been trying out different things 🙂 But the first element is the one I can’t get to scale properly (id=“element1”). The other elements on the page is how it looks when the file is in the html document.
Then it doesn’t drag properly.
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 24, 2018, 8:47pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/27 "2018-11-24T20:47:12Z")
That helps greatly! The issue is that the drag code doesn’t like any child elements like our image to be placed inside the `div`. The trick is to disable mouse/touch events on the image. Here is an example: [https://www.kirupa.com/html5/examples/drag\_multiple\_images.htm](https://www.kirupa.com/html5/examples/drag_multiple_images.htm)
The main change is the following style rule that I added:
```
.item img {
pointer-events: none;
}
```
You may need to modify your style rule to be `.element img`, but that will fix it for you as well. I set it on all images via your existing `img` style rule, and it worked.
Cheers,
Kirupa
---
### Author:  [@mafiamaria](https://forum.kirupa.com/u/mafiamaria)
#### Post date: [November 28, 2018, 8:27am UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/28 "2018-11-28T08:27:50Z")
Thank you so much! It worked 😃 Buuuut… Every time something works, it affects something else 😂 Now all my elements get to small, I figured out it is because the javascript I have that randomly places the objects inside the browser window. Maybe it doesn’t like that I use element img in css, and then only refers to element in the script? Do you have any idea how I can fix this? I should send you a medal soon for helping me so much out 😅
Webpage: folk.ntnu.no/manordt/wu1/Heimeside/framside.html
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 29, 2018, 4:10am UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/29 "2018-11-29T04:10:42Z")
Haha. Welcome to web development 😛
The reason for the sizes doesn’t seem to have anything to do with the JavaScript or how you are placing them on the page. All of your images are respecting the size you have specified:
```
.element img {
max-width: 363px;
width: 60%;
pointer-events: none;
}
```
If you increase the `width` and `max-width` values, you’ll find that your images grow to match your new size. Try that and let us know if that solves it for you.
Cheers,
Kirupa
---
### Author:  [@mafiamaria](https://forum.kirupa.com/u/mafiamaria)
#### Post date: [November 29, 2018, 12:09pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/30 "2018-11-29T12:09:48Z")
Figured it out, thank you! Again! I figured out it was because I was using the .element img {} to scale it within the browser window, but I guess it then scaled within the div instead? So I moved the max-width and width: 60% to .element {}, and in .element img {width: 100%;}. Now it works! I also added some code that prevent the images from being highlighted when dragged. Now it looks like this in the CSS file:
.element {
max-width: 363px;
width: 60%;
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
.element img {
pointer-events: none;
width: 100%;
}
.element:active {
opacity: .75;
}
.element:hover {
cursor: pointer;
}
Thanks again, you’re a real life saver! Now my webpage is finally ready to be launched 😃
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 29, 2018, 12:22pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/31 "2018-11-29T12:22:56Z")
That is awesome! Glad to hear you are unblocked 🙂
---
### Author:  [@tcaissie](https://forum.kirupa.com/u/tcaissie)
#### Post date: [December 1, 2018, 2:32pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/32 "2018-12-01T14:32:19Z")
Hi there, I’m trying your code and for some reason it doesn’t get past the condition for the if statement in dragStart.
```
if(e.target === detailPanel) {
active = true;
}
```
detailPanel being my dragItem.
I’m trying to drag an element (toggled on the draggable in the html attributes) which has a few things inside. It’s basically a card, or as the name implies, a detail panel with lots of info in it.
If I console log out my detailPanel variable it does select the right element so I’m not sure why the script can’t get into the if statement.
```
var detailPanel = document.getElementsByClassName('detailTabWrappper');
console.log(detailPanel);
var panelContainer = document.body;
console.log(panelContainer);
var active = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
panelContainer.addEventListener('mousedown', dragStart);
panelContainer.addEventListener('mouseup', dragEnd);
panelContainer.addEventListener('mousemove', drag);
function dragStart(e) {
if(e.type === 'mousedown') {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
}
// this here is not working
if(e.target === detailPanel) {
active = true;
}
}
```
Any ideas why?
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [December 1, 2018, 11:28pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/33 "2018-12-01T23:28:11Z")
One thing is that `getElementsByClassName` returns an array. Try this:
```
var detailPanel = document.getElementsByClassName('detailTabWrappper')[0];
```
That will ensure `detailPanel` points to an element instead of the array. Does that fix it?
Cheers,
Kirupa 😛
---
### Author:  [@tcaissie](https://forum.kirupa.com/u/tcaissie)
#### Post date: [December 2, 2018, 12:23am UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/34 "2018-12-02T00:23:55Z")
It works.
I can’t believe I got owned by that a second time. That the getEByClass returns an array.
Thanks!
---
### Author:  [@dozabia](https://forum.kirupa.com/u/dozabia)
#### Post date: [December 26, 2018, 12:44pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/35 "2018-12-26T12:44:15Z")
Thanks Kirupa for your post on drag and drop in javascript. It really helped me to learn about multiple drag and drop elements.
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [December 27, 2018, 4:50pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/36 "2018-12-27T16:50:05Z")
Thanks for the comment! Glad the tutorial helped 🙂
---
### Author:  [@David\_Larew](https://forum.kirupa.com/u/David_Larew)
#### Post date: [January 22, 2019, 10:33pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/37 "2019-01-22T22:33:55Z")
I’m trying to create a drag and select around multiple countries in a svg of the world.
The box should resize and grab user selected countries. tia, David
[http://datamaps.github.io/](http://datamaps.github.io/)
---
### Author:  [@Danny1897](https://forum.kirupa.com/u/Danny1897)
#### Post date: [February 26, 2019, 5:38am UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/38 "2019-02-26T05:38:42Z")
**HELP**
It runs, not clean, and needs fixes.
Can someone suggest how to fix the reset to (0,0) bug on reload+dragStart.
([https://codepen.io/Danny1897/pen/LaYBxK](https://codepen.io/Danny1897/pen/LaYBxK))
https://codepen.io/Danny1897/embed/preview/LaYBxK?height=300&slug-hash=LaYBxK&default-tabs=js,result&host=https://codepen.io
---
### Author:  [@Mikolaj\_Marciniak](https://forum.kirupa.com/u/Mikolaj_Marciniak)
#### Post date: [March 1, 2019, 11:34am UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/39 "2019-03-01T11:34:49Z")
How do I write a sortable component, based on an items position property?
---
### Author:  [@jmacky](https://forum.kirupa.com/u/jmacky)
#### Post date: [March 6, 2019, 8:23pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/40 "2019-03-06T20:23:52Z")
I am creating a Tangram game for children’s therapy sessions. I need to drag shapes on the page and rotate them in 22.5 deg increments to make the tangram images. I have the drag code (from your tutorial) done but have been unable to rotate the shapes to fit patterns that will be loaded by the user onto the page. Tangram so far can be seen at [www.hansondesignmaine.com](http://www.hansondesignmaine.com). Thank you for any help you can provide. Jack
---
### Author:  [@jmacky](https://forum.kirupa.com/u/jmacky)
#### Post date: [March 6, 2019, 8:31pm UTC](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/41 "2019-03-06T20:31:44Z")
Correction to web page name it is: [www.hansondesignmaine.com/tangram/tangram.html](http://www.hansondesignmaine.com/tangram/tangram.html) Thanks, Jack
[Previous page](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149.md?page=1)
[Next page](https://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149.md?page=3)