vmars316 Posted October 29, 2022 Share Posted October 29, 2022 (edited) Hello TIA , I am having probs with 'Drag&Drop image anywhere on screen ' . I want to drop one image on top of another image . The page example is here : https://vmars.us/ShowMe/DragDropAnyWhere-FORUM.html What am I not doing . Should I be using layers ? Here is my code: <!DOCTYPE HTML> <html> <head> <style> html,body { height:100%; } div { height:100%; border-style: double; } </style> <script type="text/javascript"> var OneBall-Charcol = null; var dragging = false; var x; var y; function window_onload() { OneBall-Charcol = document.getElementById("OneBall-Charcol"); if(window.addEventListener) { OneBall-Charcol.addEventListener('mousedown', startDrag); document.body.addEventListener('mousemove', drag); document.addEventListener('mouseout', stopDrag); document.body.addEventListener('mouseup', stopDrag); } } function startDrag(ev) { if(!dragging) { x = ev.clientX - OneBall-Charcol.offsetLeft; y = ev.clientY - OneBall-Charcol.offsetTop; dragging = true; } } function drag(ev) { if(dragging) { OneBall-Charcol.style.left = ev.clientX - x + "px"; OneBall-Charcol.style.top = ev.clientY - y + "px"; } } function stopDrag(ev) { if(dragging) { OneBall-Charcol.style.left = ev.clientX - x + "px"; OneBall-Charcol.style.top = ev.clientY - y + "px"; dragging = false; } } </script> <body onload="window_onload()"> <div> <img id="OneBall-Charcol" src="OneBall-Charcol.png" width="32" height="32" draggable="true"> <br><br> <img id="3-ScaleBoxes-Charcol" src="3-ScaleBoxes-Charcol.png" width="600" height="197" > </div> </body> </html> Edited October 29, 2022 by vmars316 Link to comment Share on other sites More sharing options...
vmars316 Posted October 30, 2022 Author Share Posted October 30, 2022 Well I have made some headway see here :https://vmars.us/ShowMe/Fretboard-Forum.html But how can I position DCDCDC-Box image below GuitarfretboardGrayRed image ? Thanks Link to comment Share on other sites More sharing options...
vmars316 Posted November 3, 2022 Author Share Posted November 3, 2022 Please Remove this Post . Thanks 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