HTML实现拖拉拽放置功能的例子

最新推荐文章于 2025-09-07 17:11:01 发布

黑胡子大叔的小屋

最新推荐文章于 2025-09-07 17:11:01 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.csdn.net/lzl980111/article/details/112648900

前端专栏收录该内容

75 篇文章

订阅专栏

本文介绍了如何使用HTML5和JavaScript创建一个简单的拖放功能，包括`drag`、`drop`和`ondragover`事件，展示了如何将灰色div元素拖放到背景为浅灰色的矩形框中并显示放置效果。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>拖拉拽</title>
<style type="text/css">
#div1 {width:350px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
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>

<p>拖动 灰色div 到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div style="width: 200px; height: 200px; background-color: #aaaaaa;" draggable="true" ondragstart="drag(event)" id="div2"></div>

</body>
</html>