HTML5中的拖放事件

最新推荐文章于 2023-03-03 17:23:18 发布

三明自

最新推荐文章于 2023-03-03 17:23:18 发布

阅读量747

点赞数

本文链接：https://blog.csdn.net/double215726/article/details/19162469

版权

在HTML5中，提供了直接支持拖放操作的API，能更加轻松的实现拖放操作以及处理拖放事件。

下面给出的源代码是通过拖放操作显示文本：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>通过拖放显示欢迎语</title>

<script type="text/javascript">
function init()
{
	var source=document.getElementById("dragme");
	var dest=document.getElementById("text");
	
	source.addEventListener("dragstart",function(ev)
	{
		var dt=ev.dataTransfer;							//向dataTransfer对象追加数据
		dt.effectAllowed='all';
		dt.setData("text/plain","I love you!");
	},false);
	
	dest.addEventListener("dragend",function(ev)		//拖放结束
	{
		ev.preventDefault();							//拒绝被拖放
	},false);
	
	dest.addEventListener("drop",function(ev)
	{
		var dt=ev.dataTransfer;							//从dataTransfer对象中取得数据
		var text=dt.getData("text/plain");
		dest.textContent+=text;							//添加文本
		ev.preventDefault();							//拒绝被拖放，设置这个属性是为了能够接收其他的控件
		ev.stopPropagation();							//停止事件传播
	},false);
	
	document.οndragοver=function(e){e.preventDefault();};
	document.οndrοp=function(e){e.preventDefault();};
}
</script>
</head>

<body οnlοad="init()">
<h1>拖放欢迎语</h1>
<div id="dragme" draggable="true" style="width:200px;border:1px solid gray;">
请拖放
</div>
<div id="text" style="width:200px; height:200px; border:1px solid gray">
</div>
</body>
</html>