html5 drag網頁圖片拖動的例子

2024-09-05 12:18:49

字體：大中小

來源：轉載

供稿：網友

圖片拖動代碼，html5 drag網頁圖片拖動的例子，可將圖片從一個方框拖放到另一個方框中，還可以顯示出這張圖片的路徑，HTML5代碼，筆者也在不斷摸索中，希望這個代碼對你學習HTML5有幫助。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>html5 drag網頁拖動的例子</title><style>@CHARSET "UTF-8";#leftbox{	float:left;	width:250px;	height:250px;	margin:5px;	border:3px solid blue;}#rightbox{	float:left;	width:250px;	height:250px;	margin:5px;	border:3px solid green;}</style><script>function doFirst() {	mypic = document.getElementById("facepic");	mypic.addEventListener("dragstart", startDrag, false);	mypic.addEventListener("dragend", endDrag, false);	leftbox = document.getElementById("leftbox");	leftbox.addEventListener("dragenter", dragenter, false);	leftbox.addEventListener("dragleave",dragleave, false);	leftbox.addEventListener("dragover", 	function(e){e.preventDefault();}, false);	leftbox.addEventListener("drop", dropped, false);}function startDrag(e) {	var code = '<img src="http://www.aspku.com../image/2.png"/>';	e.dataTransfer.setData("Text",code);}function endDrag(e) {	pic = e.target;	pic.style.visibility = 'hidden';}function dragenter(e) {	e.preventDefault();	leftbox.style.background="SkyBlue";	leftbox.style.border="3px solid red";}function dragleave(e) {	e.preventDefault();	leftbox.style.background="White";	leftbox.style.border="3px solid blue";}function dropped(e) {	e.preventDefault();	leftbox.innerHTML=e.dataTransfer.getData('Text');}window.addEventListener("load",doFirst,false);</script></head><body >	<section id="leftbox">	I dare you to ddrag an image in me!	</section>	<section id="rightbox">	<img id="facepic" src="/d/file/p/2024/09-05/0d1d916c7bd107cdfd9f9639f3bac7d4.jpg"/>	</section></body></html>

上一篇：CSS3文本框中的占位符演示示例

下一篇：html5 canvas實例碰撞檢測撞球示例