#学习笔记#(10)元素拖放事件-html

最新推荐文章于 2024-05-17 02:54:54 发布

原创最新推荐文章于 2024-05-17 02:54:54 发布 · 410 阅读

2 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

学习笔记同时被 2 个专栏收录

107 篇文章

订阅专栏

web

93 篇文章

订阅专栏

本文介绍了如何使用HTML5实现图片的拖放功能，包括设置元素可拖动、阻止链接打开、放置元素以及完成放置后的提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

四个函数

1 让元素变成可拖动的数据

2 当元素到达可拖放的区域，阻止原来的设定（链接打开新网页）

3 当在可拖放区域(div)内，释放鼠标键，div获取元素数据，进行放置

4 当完成放置给出提示

<html>
<head>
<title>Html5图片拖放</title>
<style type="text/css">
div
{
	float:left; 
	width:250px; 
	height:200px; 
	margin:10px;
	padding:10px;
	border:1px solid #aaaaaa;
}
p
{
display:none;
}
</style>
</head>
<body>
<div ondragover="stoplink(event)" ondrop="getdata(event)">
<img id="a" src="1.jpg" draggable="true" ondragstart="setdata(event)" ondragend="tishi()"/>
</div>
<div ondragover="stoplink(event)" ondrop="getdata(event)">
</div>
<p id="p1">您已完成拖动！</p>
<script type="text/javascript">
function setdata(ev){//元素a开始被拖动时，将元素a转化为可拖动的数据
ev.dataTransfer.setData("text",ev.target.id);
}
function stoplink(ev){//当元素到达可拖放区域时，阻止自动打开新的链接
ev.preventDefault();
}
function getdata(ev){//当放开鼠标键时，div获取元素a数据，进行放置
var data=ev.dataTransfer.getData("text");//获取元素a的数据
ev.target.appendChild(document.getElementById(data));//将元素a添加为div子元素
}
function tishi(){//当完成拖动时给出信息提示
document.getElementById("p1").style.display="block";
}
</script>
<!--
在拖动目标上触发事件 (源元素):
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
-->
</body>
</html>