vmars316 Posted August 1, 2019 Share Posted August 1, 2019 Hello & Thanks , Sorry so many questions at once , they are all part of one project . Referring to the article: 'Draggable DIV Element' here:https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable I would like to have multiple movable <div>s . But having problems . Here is the code so far: <!DOCTYPE html> <html> <style> #mydiv { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; cursor: move; } #mydivheader { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } </style> <body> <h1>Draggable DIV Element</h1> <p>Click and hold the mouse button down while moving the DIV element</p> <div id="mydiv"> <!-- <div id="mydivheader">Click here to move div1</div> --> <p>Move</p> <p>this</p> <p>DIV</p> </div> <!-- <div class="mydiv"> <!-- <div id="mydivheader">Click here to move div2</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> --> <script> //Make the DIV element draggagle: dragElement(document.getElementById("mydiv")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id)) { /* if present, the header is where you move the DIV from:*/ document.getElementById(elmnt.id).onmousedown = dragMouseDown; } else { /* otherwise, move the DIV from anywhere inside the DIV:*/ elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = 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) { e = 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; } } </script> </body> </html> I tried many things: For one , When I tried changing '#item & id="mydiv" ' to '.item & class="mydiv" . I don't understand why that doesn't work . class= vs id= ? Also , I tried adding a second <div class="mydiv"> . But it never displayed . When I do get multiple <div>s working , How can I detect which one was clicked . There will be many <div> <>s . Thanks for your help ! Link to comment Share on other sites More sharing options...
vmars316 Posted August 1, 2019 Author Share Posted August 1, 2019 Plz , let me ask a more basic question: For a function like this: (btw: this editor has no 'code icon ' option, so I'll use quotes .) Quote function dragStart(ev) { ev.dataTransfer.setData("text", ev.target.id); } That uses .id , #mydiv , I want to use .mydiv instead . And I will have multiple <div class="mydiv"> elements . So how can I translate ' ev.target.id) ' into ev.target.class) ? How can I identify which .mydiv was actually clicked . Is there a different syntax or format or properties that I can use ? Or is there away to set up an ' id array ' so that when a click on a <div> I know which was clicked ? Thanks Link to comment Share on other sites More sharing options...
Funce Posted August 1, 2019 Share Posted August 1, 2019 14 hours ago, vmars316 said: Referring to the article: 'Draggable DIV Element' here:https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable I would like to have multiple movable <div>s . But having problems . Here is the code so far: [Omitted for Brevity] I tried many things: For one , When I tried changing '#item & id="mydiv" ' to '.item & class="mydiv" . I don't understand why that doesn't work . class= vs id= ? Thanks for your help ! Hey there vmars, your issue here is that getElementByID only ever gets one element. getElementsByClassName gets a collection of elements, so some things needs to be adjusted. You'll need to apply the DragElement function to all of the Elements in the collection. (For loop might work well) Your headers will no longer work as they use the passed element's id. You'll need to apply a "header" custom class, one that will exist on all the headers. You can then access this header element for dragging purposes by using the below code. function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (elmnt.getElementsByClassName("header")[0]) { /* if present, the header is where you move the DIV from:*/ elmnt.getElementsByClassName("header")[0].onmousedown = dragMouseDown; } else { /* otherwise, move the DIV from anywhere inside the DIV:*/ elmnt.onmousedown = dragMouseDown; } Try this and then go from there. 2 hours ago, vmars316 said: For a function like this: (btw: this editor has no 'code icon ' option, so I'll use quotes .) Code block button is here if you've missed it. 2 hours ago, vmars316 said: That uses .id , #mydiv , I want to use .mydiv instead . And I will have multiple <div class="mydiv"> elements . So how can I translate ' ev.target.id) ' into ev.target.class) ? How can I identify which .mydiv was actually clicked . Is there a different syntax or format or properties that I can use ? Or is there away to set up an ' id array ' so that when a click on a <div> I know which was clicked ? Thanks ev.target evaluates into the element that has been activated using the event (onmousedown, onmousemove etc). That will always evaluate to the .mydiv that was clicked. So rather than document.getElementById, you use ev.target inside this function. 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 2, 2019 Share Posted August 2, 2019 Quote For a function like this: (btw: this editor has no 'code icon ' option, so I'll use quotes .) They don't show on smaller devices, you are then stuck with using [ code ]....[ /code ] (without spaces); 1 Link to comment Share on other sites More sharing options...
vmars316 Posted August 4, 2019 Author Share Posted August 4, 2019 On 8/2/2019 at 9:40 AM, dsonesuk said: They don't show on smaller devices, you are then stuck with using [ code ]....[ /code ] (without spaces); Thanks this prompted me to start an .html page for this sort of thing , called: QA-for-html5-css-js.html Hopefully I'll remember there is such a page Link to comment Share on other sites More sharing options...
vmars316 Posted August 4, 2019 Author Share Posted August 4, 2019 Great support : Quote Hey there vmars, your issue here is that getElementByID only ever gets one element. getElementsByClassName gets a collection of elements, so some things needs to be adjusted. You'll need to apply the DragElement function to all of the Elements in the collection. (For loop might work well) Your headers will no longer work as they use the passed element's id. You'll need to apply a "header" custom class, one that will exist on all the headers. You can then access this header element for dragging purposes by using the below code. ev.target evaluates into the element that has been activated using the event (onmousedown, onmousemove etc). That will always evaluate to the .mydiv that was clicked. So rather than document.getElementById, you use ev.target inside this function. Thanks Link to comment Share on other sites More sharing options...
vmars316 Posted August 4, 2019 Author Share Posted August 4, 2019 dsonesuk Here's what I mean , see image : 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now