![]() ![]() ![]() ![]() |
|||||
|
|||||
樓主 陳小黎 ![]()
![]() |
我有三個拖曳框,二個圖片(a1,b1),如何實現a1拖曳到b1時,或b1拖曳到a1時,二圖交換 以下是我的網頁碼: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>test</title> </head> <style type="text/css"> #Box01,#Box02,#Box03{ width:80px; height:100px; padding:10px; border:1px #ccc dashed; float:left; margin-right:10px; } </style> <script type="text/javascript"> function AllowDrop(event){ event.preventDefault(); } function Drag(event){ event.dataTransfer.setData("text",event.currentTarget.id); } function Drop(event){ event.preventDefault(); var data=event.dataTransfer.getData("text"); event.currentTarget.appendChild(document.getElementById(data)); } </script> <body> <br> <div> <div id="Box01" ondrop="Drop(event)" ondragover="AllowDrop(event)"> <img id="Img01" src="./PIC/a1.jpg" width="100%" height="100%" draggable="true" ondragstart="Drag(event)"> </div> <div id="Box02" ondrop="Drop(event)" ondragover="AllowDrop(event)"></div> <div id="Box03" ondrop="Drop(event)" ondragover="AllowDrop(event)"> <img id="Img02" src="./PIC/b1.jpg" width="100%" height="100%" draggable="true" ondragstart="Drag(event)"> </div> </div> <div style="clear:both;"></div> </body> </html> |