Html5 Canvas 系列_繪圖三(H5 拖放元件)
阿新 • • 發佈：2018-12-31
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="cloud"> <meta name="Keywords" content="h5 拖放"> <meta name="Description" content="html5拖放元件"> <title>html5拖放元件</title> <style type="text/css"> #draw_div {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> </head> <body> <div id = "draw_div" ondrop = "drop(event)" ondragover = "allowDrop(event)"></div> <br/> <img id = "drag1" src = "https://p1.ssl.qhimg.com/d/_hao360/weather/0.png" draggable = "true" ondragstart = "drag(event)" /> <img id = "drag2" src = "https://p1.ssl.qhimg.com/d/_hao360/weather/0.png" draggable = "true" ondragstart = "drag(event)" /> <img id = "drag3" src = "https://p1.ssl.qhimg.com/d/_hao360/weather/0.png" draggable = "true" ondragstart = "drag(event)" /> <img id = "drag4" src = "https://p1.ssl.qhimg.com/d/_hao360/weather/0.png" draggable = "true" ondragstart = "drag(event)" /> <img id = "drag5" src = "https://p1.ssl.qhimg.com/d/_hao360/weather/0.png" draggable = "true" ondragstart = "drag(event)" /> </body> <script type = "text/javascript"> function allowDrop(ev){ ev.preventDefault(); } function drop(ev){ ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } function drag(ev){ ev.dataTransfer.setData("Text", ev.target.id); } </script> </html>
