JavaScript Moveable Divs with JavaScript
1
I want to make some funny movable divs.
I have the following codes:
dragElement(document.getElementById("draggable_shortcut"));
function dragElement(elmnt)
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "top-content"))
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "top-content").onmousedown = dragMouseDown;
else
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
function elementDrag(e) window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
function closeDragElement()
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
#draggable_shortcut
position: absolute;
z-index: 9;
text-align: center;
cursor: grab;
#draggable_shortcut img
width: 50px;
height: 50px;
#draggable_shortcut p
color: black;
font-size: 14px;
margin: 0px;
<div id="draggable_shortcut">
<img src="https://images.ecosia.org/F9NhZWwmi8VL4EI6ylXOrAhWob4=/0x390/smart/https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fultraviolet%2FVery_Basic%2Fidea1600.png">
<p>Moveable Icon</p>
</div>It works really god without issues.
If I add some more divs, the script doesn't work anymore,
because it's just for one and not more.
But I want to make more than one div, which are movable.
I'm new in JavaScript Programming. Any ideas?
Thank you for the ideas and scripts.
Not my last question about this script:
Is it possible to make, if the user drops an div, the position should be setted on hundred px?
For example, if the user drops the div on the coordinates (120/105) it should get moved to (100/100). Another exmaple: (170/355) -> (200/400).
If possible, would be nice if an user can change, he would want with the hundred corrds or cutsom like this before.
Update 12.11.2018:
I found now a possibility to check the coords. But it will be only placed if the coords are exaclty 100 and not like 105. Any ideas? Demo here:
http://next.plnkr.co/edit/fBWlF0B3t4XbjuSW
Update 12.11.2018 Later...
I found now a possibillity. For these, who want the same: http://next.plnkr.co/edit/fBWlF0B3t4XbjuSW
javascript html
edited Nov 13 '18 at 2:39
Samuel Liew♦
44.6k32115148
asked Nov 11 '18 at 10:29
ManuelManuel
105
add a comment |
1
I want to make some funny movable divs.
I have the following codes:
dragElement(document.getElementById("draggable_shortcut"));
function dragElement(elmnt)
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "top-content"))
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "top-content").onmousedown = dragMouseDown;
else
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
function elementDrag(e) window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
function closeDragElement()
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
#draggable_shortcut
position: absolute;
z-index: 9;
text-align: center;
cursor: grab;
#draggable_shortcut img
width: 50px;
height: 50px;
#draggable_shortcut p
color: black;
font-size: 14px;
margin: 0px;
<div id="draggable_shortcut">
<img src="https://images.ecosia.org/F9NhZWwmi8VL4EI6ylXOrAhWob4=/0x390/smart/https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fultraviolet%2FVery_Basic%2Fidea1600.png">
<p>Moveable Icon</p>
</div>It works really god without issues.
If I add some more divs, the script doesn't work anymore,
because it's just for one and not more.
But I want to make more than one div, which are movable.
I'm new in JavaScript Programming. Any ideas?
Thank you for the ideas and scripts.
Not my last question about this script:
Is it possible to make, if the user drops an div, the position should be setted on hundred px?
For example, if the user drops the div on the coordinates (120/105) it should get moved to (100/100). Another exmaple: (170/355) -> (200/400).
If possible, would be nice if an user can change, he would want with the hundred corrds or cutsom like this before.
Update 12.11.2018:
I found now a possibility to check the coords. But it will be only placed if the coords are exaclty 100 and not like 105. Any ideas? Demo here:
http://next.plnkr.co/edit/fBWlF0B3t4XbjuSW
Update 12.11.2018 Later...
I found now a possibillity. For these, who want the same: http://next.plnkr.co/edit/fBWlF0B3t4XbjuSW
javascript html
edited Nov 13 '18 at 2:39
Samuel Liew♦
44.6k32115148
asked Nov 11 '18 at 10:29
ManuelManuel
105
Javascript != Java
– Peter Lawrey
Nov 11 '18 at 10:45
add a comment |
1
1
1
I want to make some funny movable divs.
I have the following codes:
dragElement(document.getElementById("draggable_shortcut"));
function dragElement(elmnt)
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "top-content"))
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "top-content").onmousedown = dragMouseDown;
else
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
function elementDrag(e) window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
function closeDragElement()
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
#draggable_shortcut
position: absolute;
z-index: 9;
text-align: center;
cursor: grab;
#draggable_shortcut img
width: 50px;
height: 50px;
#draggable_shortcut p
color: black;
font-size: 14px;
margin: 0px;
<div id="draggable_shortcut">
<img src="https://images.ecosia.org/F9NhZWwmi8VL4EI6ylXOrAhWob4=/0x390/smart/https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fultraviolet%2FVery_Basic%2Fidea1600.png">
<p>Moveable Icon</p>
</div>It works really god without issues.
If I add some more divs, the script doesn't work anymore,
because it's just for one and not more.
But I want to make more than one div, which are movable.
I'm new in JavaScript Programming. Any ideas?
Thank you for the ideas and scripts.
Not my last question about this script:
Is it possible to make, if the user drops an div, the position should be setted on hundred px?
For example, if the user drops the div on the coordinates (120/105) it should get moved to (100/100). Another exmaple: (170/355) -> (200/400).
If possible, would be nice if an user can change, he would want with the hundred corrds or cutsom like this before.
Update 12.11.2018:
I found now a possibility to check the coords. But it will be only placed if the coords are exaclty 100 and not like 105. Any ideas? Demo here:
http://next.plnkr.co/edit/fBWlF0B3t4XbjuSW
Update 12.11.2018 Later...
I found now a possibillity. For these, who want the same: http://next.plnkr.co/edit/fBWlF0B3t4XbjuSW
javascript html
edited Nov 13 '18 at 2:39
Samuel Liew♦
44.6k32115148
asked Nov 11 '18 at 10:29
ManuelManuel
105
I want to make some funny movable divs.
I have the following codes:
dragElement(document.getElementById("draggable_shortcut"));
function dragElement(elmnt)
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "top-content"))
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "top-content").onmousedown = dragMouseDown;
else
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
function elementDrag(e) window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
function closeDragElement()
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
#draggable_shortcut
position: absolute;
z-index: 9;
text-align: center;
cursor: grab;
#draggable_shortcut img
width: 50px;
height: 50px;
#draggable_shortcut p
color: black;
font-size: 14px;
margin: 0px;
<div id="draggable_shortcut">
<img src="https://images.ecosia.org/F9NhZWwmi8VL4EI6ylXOrAhWob4=/0x390/smart/https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fultraviolet%2FVery_Basic%2Fidea1600.png">
<p>Moveable Icon</p>
</div>It works really god without issues.
If I add some more divs, the script doesn't work anymore,
because it's just for one and not more.
But I want to make more than one div, which are movable.
I'm new in JavaScript Programming. Any ideas?
Thank you for the ideas and scripts.
Not my last question about this script:
Is it possible to make, if the user drops an div, the position should be setted on hundred px?
For example, if the user drops the div on the coordinates (120/105) it should get moved to (100/100). Another exmaple: (170/355) -> (200/400).
If possible, would be nice if an user can change, he would want with the hundred corrds or cutsom like this before.
Update 12.11.2018:
I found now a possibility to check the coords. But it will be only placed if the coords are exaclty 100 and not like 105. Any ideas? Demo here:
http://next.plnkr.co/edit/fBWlF0B3t4XbjuSW
Update 12.11.2018 Later...
I found now a possibillity. For these, who want the same: http://next.plnkr.co/edit/fBWlF0B3t4XbjuSW
dragElement(document.getElementById("draggable_shortcut"));
function dragElement(elmnt)
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "top-content"))
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "top-content").onmousedown = dragMouseDown;
else
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
function elementDrag(e) window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
function closeDragElement()
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
#draggable_shortcut
position: absolute;
z-index: 9;
text-align: center;
cursor: grab;
#draggable_shortcut img
width: 50px;
height: 50px;
#draggable_shortcut p
color: black;
font-size: 14px;
margin: 0px;
<div id="draggable_shortcut">
<img src="https://images.ecosia.org/F9NhZWwmi8VL4EI6ylXOrAhWob4=/0x390/smart/https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fultraviolet%2FVery_Basic%2Fidea1600.png">
<p>Moveable Icon</p>
</div>dragElement(document.getElementById("draggable_shortcut"));
function dragElement(elmnt)
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "top-content"))
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "top-content").onmousedown = dragMouseDown;
else
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
function elementDrag(e) window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
function closeDragElement()
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
#draggable_shortcut
position: absolute;
z-index: 9;
text-align: center;
cursor: grab;
#draggable_shortcut img
width: 50px;
height: 50px;
#draggable_shortcut p
color: black;
font-size: 14px;
margin: 0px;
<div id="draggable_shortcut">
<img src="https://images.ecosia.org/F9NhZWwmi8VL4EI6ylXOrAhWob4=/0x390/smart/https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fultraviolet%2FVery_Basic%2Fidea1600.png">
<p>Moveable Icon</p>
</div>javascript html
javascript html
edited Nov 13 '18 at 2:39
Samuel Liew♦
44.6k32115148
asked Nov 11 '18 at 10:29
ManuelManuel
105
edited Nov 13 '18 at 2:39
Samuel Liew♦
44.6k32115148
asked Nov 11 '18 at 10:29
ManuelManuel
105
edited Nov 13 '18 at 2:39
Samuel Liew♦
44.6k32115148
edited Nov 13 '18 at 2:39
Samuel Liew♦
44.6k32115148
edited Nov 13 '18 at 2:39
Samuel Liew♦
44.6k32115148
44.6k32115148
asked Nov 11 '18 at 10:29
ManuelManuel
105
asked Nov 11 '18 at 10:29
ManuelManuel
105
asked Nov 11 '18 at 10:29
ManuelManuel
105
105
Javascript != Java
– Peter Lawrey
Nov 11 '18 at 10:45
add a comment |
Javascript != Java
– Peter Lawrey
Nov 11 '18 at 10:45
Javascript != Java
– Peter Lawrey
Nov 11 '18 at 10:45
Javascript != Java
– Peter Lawrey
Nov 11 '18 at 10:45
add a comment |
2 Answers
2
active
oldest
votes
2
Try with class instead of id.
You have to call the function for each element individually. You can use Document.querySelectorAll()
to get a static (not live) NodeList representing a list of the document's elements. Then use Array.prototype.forEach() to call the function for each element:
document.querySelectorAll(".draggable_shortcut").forEach(function(el)
dragElement(el);
);
function dragElement(elmnt)
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "top-content"))
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "top-content").onmousedown = dragMouseDown;
else
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e)
function elementDrag(e)
function closeDragElement()
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
.draggable_shortcut
position: absolute;
z-index: 9;
text-align: center;
cursor: grab;
.draggable_shortcut img
width: 50px;
height: 50px;
.draggable_shortcut p
color: black;
font-size: 14px;
margin: 0px;
<div class="draggable_shortcut">
<img src="https://images.ecosia.org/F9NhZWwmi8VL4EI6ylXOrAhWob4=/0x390/smart/https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fultraviolet%2FVery_Basic%2Fidea1600.png">
<p>Moveable Icon</p>
</div>
<div class="draggable_shortcut">
<img src="https://images.ecosia.org/F9NhZWwmi8VL4EI6ylXOrAhWob4=/0x390/smart/https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fultraviolet%2FVery_Basic%2Fidea1600.png">
<p>Moveable Icon</p>
</div>answered Nov 11 '18 at 10:52
MamunMamun
26.2k71630
add a comment |
0
You need to make loop for each item.
var elements = document.getElementsByClassName("drag");
for(var i=0; i<elements.length; i++)
console.log(elements[i].id)
dragElement(document.getElementById(elements[i].id));
function dragElement(elmnt)
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "top-content"))
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "top-content").onmousedown = dragMouseDown;
else
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
function elementDrag(e)
function closeDragElement()
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
Also change id to classes
.drag
position: absolute;
z-index: 9;
text-align: center;
cursor: grab;
.drag img
width: 50px;
height: 50px;
.drag p
color: black;
font-size: 14px;
margin: 0px;
Now each div must have individual id and the same class
Working plunker: http://plnkr.co/edit/R8PUSaxkWebiZoq1XraC?p=preview
answered Nov 11 '18 at 10:48
BartoszTermenaBartoszTermena
7381311
Thanks for the tipps. Exact the thing i needed. Is there a little possibility to make, that icons can only be on coordinates like 100, 100? For example, if the icon is on 140,100 it will be placed at 100, 100?
– Manuel
Nov 11 '18 at 11:21
@Manuel Try to add top:50%; left:50%; to .drag class, then your icons will be in the middle of page
– BartoszTermena
Nov 11 '18 at 11:28
@Manuel if you want your icons to be in a specific position add specific distance from the top left right or bottom, like here: plnkr.co/edit/9YDf6DwA7xAAvULSKYhA?p=preview
– BartoszTermena
Nov 11 '18 at 11:31
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53247852%2fjavascript-moveable-divs-with-javascript%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Try with class instead of id.
You have to call the function for each element individually. You can use Document.querySelectorAll()
to get a static (not live) NodeList representing a list of the document's elements. Then use Array.prototype.forEach() to call the function for each element:
document.querySelectorAll(".draggable_shortcut").forEach(function(el)
dragElement(el);
);
function dragElement(elmnt)
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "top-content"))
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "top-content").onmousedown = dragMouseDown;
else
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e)
function elementDrag(e)
function closeDragElement()
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
.draggable_shortcut
position: absolute;
z-index: 9;
text-align: center;
cursor: grab;
.draggable_shortcut img
width: 50px;
height: 50px;
.draggable_shortcut p
color: black;
font-size: 14px;
margin: 0px;
<div class="draggable_shortcut">
<img src="https://images.ecosia.org/F9NhZWwmi8VL4EI6ylXOrAhWob4=/0x390/smart/https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fultraviolet%2FVery_Basic%2Fidea1600.png">
<p>Moveable Icon</p>
</div>
<div class="draggable_shortcut">
<img src="https://images.ecosia.org/F9NhZWwmi8VL4EI6ylXOrAhWob4=/0x390/smart/https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fultraviolet%2FVery_Basic%2Fidea1600.png">
<p>Moveable Icon</p>
</div>answered Nov 11 '18 at 10:52
MamunMamun
26.2k71630
add a comment |
2
Try with class instead of id.
You have to call the function for each element individually. You can use Document.querySelectorAll()
to get a static (not live) NodeList representing a list of the document's elements. Then use Array.prototype.forEach() to call the function for each element:
document.querySelectorAll(".draggable_shortcut").forEach(function(el)
dragElement(el);
);
function dragElement(elmnt)
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "top-content"))
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "top-content").onmousedown = dragMouseDown;
else
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e)
function elementDrag(e)
function closeDragElement()
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
.draggable_shortcut
position: absolute;
z-index: 9;
text-align: center;
cursor: grab;
.draggable_shortcut img
width: 50px;
height: 50px;
.draggable_shortcut p
color: black;
font-size: 14px;
margin: 0px;
<div class="draggable_shortcut">
<img src="https://images.ecosia.org/F9NhZWwmi8VL4EI6ylXOrAhWob4=/0x390/smart/https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fultraviolet%2FVery_Basic%2Fidea1600.png">
<p>Moveable Icon</p>
</div>
<div class="draggable_shortcut">
<img src="https://images.ecosia.org/F9NhZWwmi8VL4EI6ylXOrAhWob4=/0x390/smart/https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fultraviolet%2FVery_Basic%2Fidea1600.png">
<p>Moveable Icon</p>
</div>answered Nov 11 '18 at 10:52
MamunMamun
26.2k71630
add a comment |
2
2
2
Try with class instead of id.
You have to call the function for each element individually. You can use Document.querySelectorAll()
to get a static (not live) NodeList representing a list of the document's elements. Then use Array.prototype.forEach() to call the function for each element:
document.querySelectorAll(".draggable_shortcut").forEach(function(el)
dragElement(el);
);
function dragElement(elmnt)
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "top-content"))
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "top-content").onmousedown = dragMouseDown;
else
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e)
function elementDrag(e)
function closeDragElement()
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
.draggable_shortcut
position: absolute;
z-index: 9;
text-align: center;
cursor: grab;
.draggable_shortcut img
width: 50px;
height: 50px;
.draggable_shortcut p
color: black;
font-size: 14px;
margin: 0px;
<div class="draggable_shortcut">
<img src="https://images.ecosia.org/F9NhZWwmi8VL4EI6ylXOrAhWob4=/0x390/smart/https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fultraviolet%2FVery_Basic%2Fidea1600.png">
<p>Moveable Icon</p>
</div>
<div class="draggable_shortcut">
<img src="https://images.ecosia.org/F9NhZWwmi8VL4EI6ylXOrAhWob4=/0x390/smart/https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fultraviolet%2FVery_Basic%2Fidea1600.png">
<p>Moveable Icon</p>
</div>answered Nov 11 '18 at 10:52
MamunMamun
26.2k71630
Try with class instead of id.
You have to call the function for each element individually. You can use Document.querySelectorAll()
to get a static (not live) NodeList representing a list of the document's elements. Then use Array.prototype.forEach() to call the function for each element:
document.querySelectorAll(".draggable_shortcut").forEach(function(el)
dragElement(el);
);
function dragElement(elmnt)
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "top-content"))
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "top-content").onmousedown = dragMouseDown;
else
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e)
function elementDrag(e)
function closeDragElement()
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
.draggable_shortcut
position: absolute;
z-index: 9;
text-align: center;
cursor: grab;
.draggable_shortcut img
width: 50px;
height: 50px;
.draggable_shortcut p
color: black;
font-size: 14px;
margin: 0px;
<div class="draggable_shortcut">
<img src="https://images.ecosia.org/F9NhZWwmi8VL4EI6ylXOrAhWob4=/0x390/smart/https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fultraviolet%2FVery_Basic%2Fidea1600.png">
<p>Moveable Icon</p>
</div>
<div class="draggable_shortcut">
<img src="https://images.ecosia.org/F9NhZWwmi8VL4EI6ylXOrAhWob4=/0x390/smart/https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fultraviolet%2FVery_Basic%2Fidea1600.png">
<p>Moveable Icon</p>
</div>document.querySelectorAll(".draggable_shortcut").forEach(function(el)
dragElement(el);
);
function dragElement(elmnt)
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "top-content"))
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "top-content").onmousedown = dragMouseDown;
else
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e)
function elementDrag(e)
function closeDragElement()
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
.draggable_shortcut
position: absolute;
z-index: 9;
text-align: center;
cursor: grab;
.draggable_shortcut img
width: 50px;
height: 50px;
.draggable_shortcut p
color: black;
font-size: 14px;
margin: 0px;
<div class="draggable_shortcut">
<img src="https://images.ecosia.org/F9NhZWwmi8VL4EI6ylXOrAhWob4=/0x390/smart/https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fultraviolet%2FVery_Basic%2Fidea1600.png">
<p>Moveable Icon</p>
</div>
<div class="draggable_shortcut">
<img src="https://images.ecosia.org/F9NhZWwmi8VL4EI6ylXOrAhWob4=/0x390/smart/https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fultraviolet%2FVery_Basic%2Fidea1600.png">
<p>Moveable Icon</p>
</div>document.querySelectorAll(".draggable_shortcut").forEach(function(el)
dragElement(el);
);
function dragElement(elmnt)
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "top-content"))
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "top-content").onmousedown = dragMouseDown;
else
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e)
function elementDrag(e)
function closeDragElement()
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
.draggable_shortcut
position: absolute;
z-index: 9;
text-align: center;
cursor: grab;
.draggable_shortcut img
width: 50px;
height: 50px;
.draggable_shortcut p
color: black;
font-size: 14px;
margin: 0px;
<div class="draggable_shortcut">
<img src="https://images.ecosia.org/F9NhZWwmi8VL4EI6ylXOrAhWob4=/0x390/smart/https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fultraviolet%2FVery_Basic%2Fidea1600.png">
<p>Moveable Icon</p>
</div>
<div class="draggable_shortcut">
<img src="https://images.ecosia.org/F9NhZWwmi8VL4EI6ylXOrAhWob4=/0x390/smart/https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fultraviolet%2FVery_Basic%2Fidea1600.png">
<p>Moveable Icon</p>
</div>answered Nov 11 '18 at 10:52
MamunMamun
26.2k71630
edited Nov 11 '18 at 11:03
answered Nov 11 '18 at 10:52
MamunMamun
26.2k71630
answered Nov 11 '18 at 10:52
MamunMamun
26.2k71630
answered Nov 11 '18 at 10:52
MamunMamun
26.2k71630
26.2k71630
add a comment |
add a comment |
0
You need to make loop for each item.
var elements = document.getElementsByClassName("drag");
for(var i=0; i<elements.length; i++)
console.log(elements[i].id)
dragElement(document.getElementById(elements[i].id));
function dragElement(elmnt)
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "top-content"))
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "top-content").onmousedown = dragMouseDown;
else
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
function elementDrag(e)
function closeDragElement()
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
Also change id to classes
.drag
position: absolute;
z-index: 9;
text-align: center;
cursor: grab;
.drag img
width: 50px;
height: 50px;
.drag p
color: black;
font-size: 14px;
margin: 0px;
Now each div must have individual id and the same class
Working plunker: http://plnkr.co/edit/R8PUSaxkWebiZoq1XraC?p=preview
answered Nov 11 '18 at 10:48
BartoszTermenaBartoszTermena
7381311
Thanks for the tipps. Exact the thing i needed. Is there a little possibility to make, that icons can only be on coordinates like 100, 100? For example, if the icon is on 140,100 it will be placed at 100, 100?
– Manuel
Nov 11 '18 at 11:21
@Manuel Try to add top:50%; left:50%; to .drag class, then your icons will be in the middle of page
– BartoszTermena
Nov 11 '18 at 11:28
@Manuel if you want your icons to be in a specific position add specific distance from the top left right or bottom, like here: plnkr.co/edit/9YDf6DwA7xAAvULSKYhA?p=preview
– BartoszTermena
Nov 11 '18 at 11:31
add a comment |
0
You need to make loop for each item.
var elements = document.getElementsByClassName("drag");
for(var i=0; i<elements.length; i++)
console.log(elements[i].id)
dragElement(document.getElementById(elements[i].id));
function dragElement(elmnt)
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "top-content"))
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "top-content").onmousedown = dragMouseDown;
else
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
function elementDrag(e)
function closeDragElement()
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
Also change id to classes
.drag
position: absolute;
z-index: 9;
text-align: center;
cursor: grab;
.drag img
width: 50px;
height: 50px;
.drag p
color: black;
font-size: 14px;
margin: 0px;
Now each div must have individual id and the same class
Working plunker: http://plnkr.co/edit/R8PUSaxkWebiZoq1XraC?p=preview
answered Nov 11 '18 at 10:48
BartoszTermenaBartoszTermena
7381311
Thanks for the tipps. Exact the thing i needed. Is there a little possibility to make, that icons can only be on coordinates like 100, 100? For example, if the icon is on 140,100 it will be placed at 100, 100?
– Manuel
Nov 11 '18 at 11:21
@Manuel Try to add top:50%; left:50%; to .drag class, then your icons will be in the middle of page
– BartoszTermena
Nov 11 '18 at 11:28
@Manuel if you want your icons to be in a specific position add specific distance from the top left right or bottom, like here: plnkr.co/edit/9YDf6DwA7xAAvULSKYhA?p=preview
– BartoszTermena
Nov 11 '18 at 11:31
add a comment |
0
0
0
You need to make loop for each item.
var elements = document.getElementsByClassName("drag");
for(var i=0; i<elements.length; i++)
console.log(elements[i].id)
dragElement(document.getElementById(elements[i].id));
function dragElement(elmnt)
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "top-content"))
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "top-content").onmousedown = dragMouseDown;
else
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
function elementDrag(e)
function closeDragElement()
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
Also change id to classes
.drag
position: absolute;
z-index: 9;
text-align: center;
cursor: grab;
.drag img
width: 50px;
height: 50px;
.drag p
color: black;
font-size: 14px;
margin: 0px;
Now each div must have individual id and the same class
Working plunker: http://plnkr.co/edit/R8PUSaxkWebiZoq1XraC?p=preview
answered Nov 11 '18 at 10:48
BartoszTermenaBartoszTermena
7381311
You need to make loop for each item.
var elements = document.getElementsByClassName("drag");
for(var i=0; i<elements.length; i++)
console.log(elements[i].id)
dragElement(document.getElementById(elements[i].id));
function dragElement(elmnt)
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "top-content"))
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "top-content").onmousedown = dragMouseDown;
else
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
function elementDrag(e)
function closeDragElement()
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
Also change id to classes
.drag
position: absolute;
z-index: 9;
text-align: center;
cursor: grab;
.drag img
width: 50px;
height: 50px;
.drag p
color: black;
font-size: 14px;
margin: 0px;
Now each div must have individual id and the same class
Working plunker: http://plnkr.co/edit/R8PUSaxkWebiZoq1XraC?p=preview
answered Nov 11 '18 at 10:48
BartoszTermenaBartoszTermena
7381311
edited Nov 11 '18 at 10:55
answered Nov 11 '18 at 10:48
BartoszTermenaBartoszTermena
7381311
answered Nov 11 '18 at 10:48
BartoszTermenaBartoszTermena
7381311
answered Nov 11 '18 at 10:48
BartoszTermenaBartoszTermena
7381311
7381311
Thanks for the tipps. Exact the thing i needed. Is there a little possibility to make, that icons can only be on coordinates like 100, 100? For example, if the icon is on 140,100 it will be placed at 100, 100?
– Manuel
Nov 11 '18 at 11:21
@Manuel Try to add top:50%; left:50%; to .drag class, then your icons will be in the middle of page
– BartoszTermena
Nov 11 '18 at 11:28
@Manuel if you want your icons to be in a specific position add specific distance from the top left right or bottom, like here: plnkr.co/edit/9YDf6DwA7xAAvULSKYhA?p=preview
– BartoszTermena
Nov 11 '18 at 11:31
add a comment |
Thanks for the tipps. Exact the thing i needed. Is there a little possibility to make, that icons can only be on coordinates like 100, 100? For example, if the icon is on 140,100 it will be placed at 100, 100?
– Manuel
Nov 11 '18 at 11:21
@Manuel Try to add top:50%; left:50%; to .drag class, then your icons will be in the middle of page
– BartoszTermena
Nov 11 '18 at 11:28
@Manuel if you want your icons to be in a specific position add specific distance from the top left right or bottom, like here: plnkr.co/edit/9YDf6DwA7xAAvULSKYhA?p=preview
– BartoszTermena
Nov 11 '18 at 11:31
Thanks for the tipps. Exact the thing i needed. Is there a little possibility to make, that icons can only be on coordinates like 100, 100? For example, if the icon is on 140,100 it will be placed at 100, 100?
– Manuel
Nov 11 '18 at 11:21
Thanks for the tipps. Exact the thing i needed. Is there a little possibility to make, that icons can only be on coordinates like 100, 100? For example, if the icon is on 140,100 it will be placed at 100, 100?
– Manuel
Nov 11 '18 at 11:21
@Manuel Try to add top:50%; left:50%; to .drag class, then your icons will be in the middle of page
– BartoszTermena
Nov 11 '18 at 11:28
@Manuel Try to add top:50%; left:50%; to .drag class, then your icons will be in the middle of page
– BartoszTermena
Nov 11 '18 at 11:28
@Manuel if you want your icons to be in a specific position add specific distance from the top left right or bottom, like here: plnkr.co/edit/9YDf6DwA7xAAvULSKYhA?p=preview
– BartoszTermena
Nov 11 '18 at 11:31
@Manuel if you want your icons to be in a specific position add specific distance from the top left right or bottom, like here: plnkr.co/edit/9YDf6DwA7xAAvULSKYhA?p=preview
– BartoszTermena
Nov 11 '18 at 11:31
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53247852%2fjavascript-moveable-divs-with-javascript%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Javascript != Java
– Peter Lawrey
Nov 11 '18 at 10:45