paul1968 Posted May 5, 2020 Share Posted May 5, 2020 Hello everybody. I am not really familiar with javascript. However I found the below script where you can drag en drop a image to a div in both directions. My goal however is to choose one image from multiply images and drag them to a specific div The original script is: <!DOCTYPE HTML> <html> <head> <style> #div1, #div2 { float: left; width: 100px; height: 35px; margin: 10px; padding: 10px; border: 1px solid black; } </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <h2>Drag and Drop</h2> <p>Drag the image back and forth between the two div elements.</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>I changed the above script with 3 images. but this way I can drag images over another image and it then vanishes! my goal is that the images only can be dropped to one div or back to his original div. For example. div 1 can drag and dropped to div 3 or back to div 1. div 2 can drag and dropped to div 3 or back. But div 1 may nog be dropped on div 2! My goal of this all is to put all together in a form which the visitor sent to me. thanks all for your input. !DOCTYPE HTML> <html> <head> <style> #div1, #div2, #div3 { float: left; width: 400px; height: 200px; margin: 10px; padding: 10px; border: 1px solid black; } </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <h2>Drag and Drop</h2> <p>Drag the image back and forth between the two div elements.</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="headerkeuze1.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="400" height="200"> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="headerkeuze2.jpg" draggable="true" ondragstart="drag(event)" id="drag2" width="400" height="200"> </div> <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html> Link to comment Share on other sites More sharing options...
vmars316 Posted October 29, 2022 Share Posted October 29, 2022 (edited) Hmm... I am trying to do a similar thing here : https://w3schools.invisionzone.com/topic/63436-dragdrop-image-anywhere-on-screen/ See here : https://vmars.us/ShowMe/DragDropAnyWhere-FORUM.html I want to drop balls onto guitar fretboard . I am reading up on layers now . Lets keep in touch... Edited October 29, 2022 by vmars316 Link to comment Share on other sites More sharing options...
vmars316 Posted October 30, 2022 Share Posted October 30, 2022 I made some headway with this https://vmars.us/ShowMe/Fretboard-Forum.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