[JAVA Script]有關拖曳圖片並交換圖片

陳小黎
請教各位前輩:
我有三個拖曳框,二個圖片(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>

浩瀚星空
1.請用程式標簽排版好。這樣子要教你很難對應。程式碼也超難讀。

2.請詳細說明你目前碰到怎麼樣的問題。是圖片不能過去。有無錯誤訊息?

要問人家問題,不要像是再給人家考試一樣,別人要幫你還得自行去做排版查看。
還得要問神了解你是發生什麼問題。還得run看看才知道你到底想要什麼。
這不是老師出考題要不然是什麼。
Qinghua
請自己google: JS Drag and Drop一堆範例
回到頂部