vmars316 Posted February 1, 2023 Share Posted February 1, 2023 Thanks for your Help... What I am trying to do is Modify this W3School's example codeso that I can DragDrop Multiple DivsRather than just DnD 1 Div .W3Schools online HTML editorhttps://vmars.us/Guitar/Which-DIV-was-CLICKED-BY-PARENT.html Problem is I can't get past the 'function dragElement' it doesn't get to the other Functions . Please , what am I doing wrong ? Thanks for your Help... <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <style> img { margin: 5px; padding: 5px 8px; outline: none; border: none; color: white; font-size: 1em; } div:hover { // background-color: #ffa000; cursor: pointer; } #result { border:1px solid; display:inline-block; margin:5px; /* padding:5px; */ } </style> </head> <body> <div id="elemContainer" style="position: absolute; width: 1420px; height: 750px; display:inline-block; "> <div class="item" id="elem1" draggable="true" style="border-radius: 50%; width:32px; height:32px; position: relative; float:left; left: 30%; top:0; background-color: #FF0004;"> 1</div> <div class="item" id="elem2" draggable="true" style="border-radius: 50%; width:32px; height:32px; position: relative; float:left; left: 31%; top: 0; background-color: #FE8E05;"> 2</div> </div> <!-- id="elemContainer" --> <div id="result">result = </div> <script> var holdTargetId ; // dragElement(holdTargetId) ; const divGroup = document.getElementById("elemContainer"); const result = document.getElementById("result"); const divGroupPressed = e => { const isDiv = e.target.nodeName === 'DIV'; if(!isDiv) { return } holdTargetId = e.target.id ; console.log("holdTargetId = " + holdTargetId) ; dragElement(holdTargetId) ; } divGroup.addEventListener("click", divGroupPressed); </script> <script> var elmnt ; var timesIn = 0 ; function dragElement(holdTargetId) { console.log("function dragElement(elmnt = " + holdTargetId) ; elmnt = holdTargetId ; // var savedTargetId = event.target.id ; var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { console.log("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(); console.log("function elementDrag(e)") ; // 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:*/ console.log("function closeDragElement()") document.onmouseup = null; document.onmousemove = null; } </script> </body></html> 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