HTML元素的拖动

最新推荐文章于 2024-04-09 17:34:36 发布

我是大头鸟

最新推荐文章于 2024-04-09 17:34:36 发布

阅读量558

点赞数

CC 4.0 BY-SA版权

分类专栏： javaScript 文章标签：元素拖动

本文链接：https://blog.youkuaiyun.com/datouniao1/article/details/47659437

javaScript 专栏收录该内容

61 篇文章

订阅专栏

本文介绍如何使用HTML5和JavaScript实现网页上的元素拖放功能。通过简单的代码示例展示了如何使一个段落元素变得可拖动，并将其放置于指定的div容器内。涉及的技术包括dragstart、ondrop及ondragover事件。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.div1{
float: left;
width: 200px;
height: 300px;
margin:30px;
border: 2px solid #aaaaaa
}
</style>
<script type="text/javascript">
function dragStart(ev)
{//在开始拖动的时候我们就应该将该元素
//的数类型转换为文本类型的
ev.dataTransfer.setData("Text",event.target.id);
}
function dragging(ev)
{
//这个函数应该在目标位置的进行响应，目的是我们可以
//可以在目标去放下，实现不是链接的方式打开
ev.preventDefault();
}
function allowDrag(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
//这个样子拖动的具体的动作就实现了我们可以看到的是
//在拖动的过程中对目标位子和拖动目标之间有设置
//主要是一些属性的设置，在目标位置中我们哟啊社会在
//拖动的时候的属性ondrop这个事件进行一个响应，响应是拖过javaScript这个脚本语言完成的，还有一个事件是拖动结束的事件的一个响应
//这个响应也是javaScript脚本语言实现的在脚本是实现的过程中我们首
//将从上面转换的数据类型中获取数据，然后将该对象添加到目标位置
//用到的函数是appendChild这个函数，括号里面是一个根据数据获取的
//id
</script>
<title></title>
</head>
<body>
<div class="div1" ondrop="dragging(event)" ondragover="allowDrag(event)"></div>

<p id="demo" draggable="true" ondragstart="dragStart(event)">拖动我</p>
</body>
</html>