Today, re-use practice a bit H5 canvas combined with drag and drop, Here is the code to achieve:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="shortcut icon" href="./imges/icon_2.png"> <title>Document</title> </head> <body> < mycanvas1 = mycanvas.getContext("2d"); mycanvas1.font = "50px Arial"; mycanvas1.strokeText("Hello World", 10, 80); function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function allowDrop(ev) { ev.preventDefault(); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </body> </html>
Achieve results:
Thank you so good-looking, but also look at what I wrote blog!