HTML5 拖放实例
下面的例子是一个简单的拖放实例:
实例
<!DOCTYPEHTML><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)title><styletype="text/css">#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}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.appendChild(document.getElementById(data)); }script>head><body><p>拖动 RUNOOB.COM 图片到矩形框中:p><divid="div1"ondrop="drop(event)"ondragover="allowDrop(event)">div><br><imgloading="lazy"id="drag1"src="/images/logo.png"draggable="true"ondragstart="drag(event)"width="336"height="69">body>html>