Drag and Drop in JavaScript Html and css on December 30, 2021 Get link Facebook X Pinterest Email Other Apps Drag and Drop in JavaScript Html and css Html part <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>drag and drop </title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Drag the image into the rectangular box </h1> <br> <div id="start" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="st" src="image.png" draggable="true" ondragstart="drag(event)" width="110" height="100"> <script> function allowDrop(ev){ ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData ("text", ev.target.id); } function drop(ev) { ev.preventDefault(); let data = ev.dataTransfer.getData("text"); ev.target.appendChild (document.getElementById (data)); } </script> </body> </html> CSS part *{ margin: 0; padding: 0; box-sizing: border-box; } body{ width: 400px; height: 400px; margin-left: 100px; background: #3333; /* color: #fff; */ } #start{ width: 350px; height: 150px; border: 2px solid #000; background: cadetblue; } img{ box-shadow: 0 0 10px #000; } Comments
Comments
Post a Comment