实现图片的拖放
<!DOCTYPE html> <html> <head> <title>拖放</title> <style> .div1{ width:300px; height:300px; background-color:blue; } .div2{ width:300px; height:300px; background-color:yellow; } </style> <script type="text/javascript"> function setdragData(e){ e.dataTransfer.setData("Text",e.target.id);//这个事件是加在被拖放的物体上的，通过dataTransfer.setData设置被拖放物体的数据：'text'表示的就是物体的标识， } function AllowDrag(e){ e.preventDefault();//这个事件是加载到要拖放到什么地方的对象上的。这个对象原来是禁止有物体拖放到上面的，所以我们要先去除他的禁止默认属性。 } function dragEnd(e){ e.preventDefault(); var data=e.dataTransfer.getData("Text");//这个事件也是加载到拖放到什么地方的对象上的。我们通过getData函数获取到被拖放物体的id e.target.appendChild(document.getElementById(data));//这一步是将被拖放物体添加到要拖放的位置。 } </script> </head> <body> <div id="div1" class="div1" ondragover="AllowDrag(event)" ondrop="dragEnd(event)"></div> <div id="div2" class="div2" ondragover="AllowDrag(event)" ondrop="dragEnd(event)"></div> <img src="1.png" id="img1" ondragstart="setdragData(event)"/> </body> </html>
整个顺序是先设置被拖放物体的数据(ondragstart),接着是禁止默认属性(ondragover),最后是拖放结束(ondrop).