html5之拖放简单效果

最新推荐文章于 2022-04-15 16:36:15 发布

web菜鸟程序猿

最新推荐文章于 2022-04-15 16:36:15 发布

阅读量847

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Html 文章标签： CSS HTML

本文链接：https://blog.youkuaiyun.com/zhou0107/article/details/9146145

Html 专栏收录该内容

2 篇文章

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>Drag and Drop</title>
	<link rel="stylesheet" href="">
<style type="text/css">
#div1,#div2 {
	width:488px;
	height:70px;
	padding:10px;
	border:1px solid #aaaaaa;
}
</style>
<script type="text/javascript">
	//默认可放置
	function allowDrop(ev){
		ev.preventDefault();
	}
	//设置拖动
	function drag(ev){
		ev.dataTransfer.setData("Text",ev.target.id);
	}
	//设置放置
	function drop(ev){
		ev.preventDefault();
		var data = ev.dataTransfer.getData("Text");
		ev.target.appendChild(document.getElementById(data));
	}
</script>
</head>
<body>
	<!--
	/** 
	 * drag(event) 被拖动的数据
	 * drop(evemt) 放置数据
	 * draggable = "true" 设置图片可拖动
	 * 设置允许放置 调用ondragover的事件event.preventDefault();
	 * event.dataTransfer.getData("Text") 从剪切板中获取指定格式的数据
	 * event.dataTransfer.setData(""Text",evemt.target.id)给指定的对象赋予数据(数据类型：text,值是可拖动的元素id(drag1))
	 */
	-->
	<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
		<img src="http://www.w3school.com.cn/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
	</div>
	<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
	</div>
</body>
</html>