html5之拖放简单效果
来源：互联网 发布：麻将源码 编辑：程序博客网 时间：2024/04/18 09:32
<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>Drag and Drop</title><link rel="stylesheet" href=""><style type="text/css">#div1,#div2 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}</style><script type="text/javascript">//默认可放置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><!--/** * drag(event) 被拖动的数据 * drop(evemt) 放置数据 * draggable = "true" 设置图片可拖动 * 设置允许放置 调用ondragover的事件event.preventDefault(); * event.dataTransfer.getData("Text") 从剪切板中获取指定格式的数据 * event.dataTransfer.setData(""Text",evemt.target.id)给指定的对象赋予数据(数据类型：text,值是可拖动的元素id(drag1)) */--><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="http://www.w3school.com.cn/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" /></div><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></body></html>
