javascript - Drag & Drop help needed -
i help improve following. how can wrong dropped reply shown in reddish or greenish if correct. gap filling drag & drop exercise language students.
below simple code using:
<!doctype html> <html> <head> <style> .draggable { width: 120px; padding: 1px; border: 1px solid gray; margin: 0px; text-align:center; } #div1,#div2 {display:inline-block;min-width:150px;min-height:10px; border-style:solid;border-width:0px;border-bottom-width:2px;} </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.parentnode.replacechild(document.getelementbyid(data), ev.target); document.getelementbyid(data).classname = ""; } </script> </head> <body> <span class="draggable" id="drag1" draggable="true" ondragstart="drag(event)"> heart heart</span> <span class="draggable" id="drag2" draggable="true" ondragstart="drag(event)"> eye eye</span> <br /> <ol> <li>our relationship going badly wrong, after sat downwards , had <div id="div1" ondrop="drop(event)" ondragover="allowdrop(event)"></div> talk decided seek again. we're lot happier now. </l7> <li>i wish wife , sis agree things. problem can't see <div id="div2" ondrop="drop(event)" ondragover="allowdrop(event)"> </div> , argue everything. </li> </ol> </body> </html>
if set loading alternative in jsfiddle "no wrap - in <head>" drag , drop work. please utilize console diagnose issues , include errors in post.
it appears next tutorial on http://www.w3schools.com/html/html5_draganddrop.asp not place learning web development not endorsed/affiliated w3.
the next demo should function properly. tested out on chrome.
i made simple alter drag() function:
function drag(ev) { ev.target.innerhtml += ' '; // add together space there no keming... ev.datatransfer.setdata("text", ev.target.id); } javascript html css
No comments:
Post a Comment