<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> </div> </nav> <div class="col-md-6 well"> <hr style="border-top:1px dotted #ccc;"/> <div class="col-md-6"> </div> <div class="col-md-6" style="border:1px SOLID #ccc; height:300px;" ondrop="drop(event)" ondragover="dragOver(event)"> Call me by the old familiar name. Speak of me in the easy way which you always used. Put no difference into your tone. Wear no forced air of solemnity or sorrow. </div> </div> </body> </html>
function dragOver(e){ e.preventDefault(); } function drop(e){ e.preventDefault(); var data = e.dataTransfer.getData("data"); var word = document.getElementById(data).innerHTML; e.target.innerHTML = "<p>"+word+"</p>"; } function drag(e){ e.dataTransfer.setData("data", e.target.id); }