<!DOCTYPE html> <html> <head> <title>My Web Page</title> <script> function dragstart(ev){ ev.dataTransfer.setData("Text",ev.target.id); } function dragfinish(ev){ ev.preventDefault(); } function dropstart(ev){ var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.preventDefault(); } </script> </head> <body> <p text-style="center"> I started to work on drag and drop</p> <div style="width:400px;height:380px; border:2px; border-style:solid;" id="div1" ondrop="dropstrat(event)" ondragover="dragfinish(event)"></div> <div style="height:300></div> <img id="pic1 src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAqB_HEXzRtgLQiHn71I1-ph0cAhoiBXkMwA&usqp=CAU" width="355" height="355" draggable="true" ondragstart="dragstart(event)"> </body>Probé este código pero no tengo idea de qué está mal. ¡Alguien puede ayudarme! Me pregunto si los problemas se originan en mi navegador web, mayúsculas o minúsculas, o no sé, ¿tal vez un punto y coma puede causar problemas? el caso es que puedo arrastrar un elemento en mi página web, pero no puedo colocarlo en el div que definí, supongo que todo salió bien excepto el momento en que escribí el script.
El problema es que tu
ondrop="dropstrat(event)"en vez de
ondrop="dropstart(event)"Muchos errores tipográficos, citas faltantes, etc.
<!DOCTYPE html> <html> <head> <title>My Web Page</title> <script> function dragstart(ev) { ev.dataTransfer.setData("Text", ev.target.id); } function dragfinish(ev) { ev.preventDefault(); } function dropstart(ev) { var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.preventDefault(); } </script> </head> <body> <p text-style="center"> I started to work on drag and drop</p> <div style="width:400px;height:380px; border:2px; border-style:solid;" id="div1" ondrop="dropstart(event)" ondragover="dragfinish(event)"></div> <div style="height:300"></div> <img id=" pic1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAqB_HEXzRtgLQiHn71I1-ph0cAhoiBXkMwA&usqp=CAU" width="355" height="355" draggable="true" ondragstart="dragstart(event)" /> </body>