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实例碰撞检测撞球示例

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注