JS创建DIV，实现鼠标拖拽效果

图图的巧克力

已于 2023-03-13 14:48:08 修改

阅读量4.2k

点赞数 2

文章标签： javascript 前端 html

于 2022-07-21 16:19:31 首次发布

本文链接：https://blog.csdn.net/qq_46162047/article/details/125914447

版权

本文通过原生JavaScript动态创建一个div，并实现鼠标拖拽功能。涉及的鼠标事件包括onmousedown、onmousemove和onmouseup。步骤包括创建div、设置样式、添加到body、获取div DOM对象以及绑定鼠标事件来实现拖拽效果。

摘要由CSDN通过智能技术生成

题目：用原生js动态创建一个div，大小随意，挂在body上，实现鼠标拖拽效果

需要用到的鼠标事件：

1.鼠标按下（onmousedown），

2.鼠标移动（onmousemove）

3.鼠标抬起（onmouseup）

第一步：创建容器（每个页面，最大的容器是body对象，所有dom对象创建后默认都会放到body）

第二步，创建div，并设置宽高，背景颜色，设置绝对定位

第三步：将创建的div添加到容器中（注意先添加到容器，再去找div的DOM对象，不然找不到）

第四步，获取到div的DOM对象，用document.getElementById("");

第五步，给div添加鼠标事件，鼠标按下时触发鼠标点击事件，同时鼠标按下并移动，触发鼠标移动事件（注意移动时不超过浏览器范围），鼠标抬起，取消鼠标按下事件和鼠标移动事件。

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--题目：动态创建一个div，大小随意，挂在body上，实现鼠标拖拽效果-->
		<

关注