拖放

最新推荐文章于 2024-09-01 15:58:57 发布

consistent__

最新推荐文章于 2024-09-01 15:58:57 发布

阅读量100

点赞数

本文链接：https://blog.csdn.net/consistent__/article/details/104868924

版权

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8"> 
	<style type="text/css">
		#div1{
			width: 350px;
			height: 70px;
			padding: 10px;
			border:1px solid #aaa;
		}
	</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>
	<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
	<!--（进行放置）ondragover事件规定在何处放置被拖动的数据,
	默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
	这要通过调用 ondragover 事件的 event.preventDefault() 方法-->
	<!--ondrop属性调用了一个函数调用
	preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
	通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
	被拖数据是被拖元素的 id ("drag1")
	把被拖元素追加到放置元素（目标元素）中-->
	<br>
	<img id="drag1" src="wuhan.png" draggable="true" ondragstart="drag(event)" width="336" height="69"><!--draggable 属性为true，元素可拖动-->
	<!--(放到何处)ondragstart属性调用了一个函数drag(event)规定了被拖动的数据,Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id ("drag1")。-->
</body>
</html>