台灣最大程式設計社群網站
線上人數
990
 
會員總數:244538
討論主題:188695
歡迎您免費加入會員
討論區列表 >> Java Script/ Node.js >> [JAVA Script]有關拖曳圖片並交換圖片
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
[JAVA Script]有關拖曳圖片並交換圖片
價值 : 5 QP  點閱數:185 回應數: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的文章: [ java script ] , [ html5 ] ,
本篇文章發表於2019-01-21 11:05
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
回應

浩瀚星空
捐贈 VP 給 浩瀚星空 檢舉此回應
1.請用程式標簽排版好。這樣子要教你很難對應。程式碼也超難讀。

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

要問人家問題,不要像是再給人家考試一樣,別人要幫你還得自行去做排版查看。
還得要問神了解你是發生什麼問題。還得run看看才知道你到底想要什麼。
這不是老師出考題要不然是什麼。
本篇文章回覆於2019-01-22 09:39
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

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