台灣最大程式設計社群網站
線上人數
1229
 
會員總數:244537
討論主題:188695
歡迎您免費加入會員
討論區列表 >> CSS/HTML5/Bootstarp >> [HTML5]有關拖曳圖片並交換圖片
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
[HTML5]有關拖曳圖片並交換圖片
價值 : 5 QP  點閱數:180 回應數:1

樓主

陳小黎
門外漢
0 2
10 0
發送站內信

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




搜尋相關Tags的文章: [ 拖曳圖片 ] , [ HTML5 ] , [ 交換圖片 ] ,
本篇文章發表於2019-01-20 22:57
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
回應

浩瀚星空
捐贈 VP 給 浩瀚星空 檢舉此回應
1.請善用並學會使用程式標簽來排版你的程式碼

2.這邊是屬於Bootstarp 或css的區域。你的問題完全與這兩項無關。如可以的話,你的問題是偏向於javascript的區域。

3.請詳細說明你目前碰到的問題在哪。要抄範例檔也需要先了解一下他們的作用。

這邊我就不回應你的答案了。

本篇文章回覆於2019-01-21 10:42
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.