JavaScript实现简单拖拽功能

最新推荐文章于 2023-11-28 11:58:47 发布

木的竹

最新推荐文章于 2023-11-28 11:58:47 发布

阅读量212

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_43637079/article/details/104460382

版权

声明：笔者为初学菜鸟，若有不妥当之处，还望不吝赐教。

实现效果:点击鼠标并移动，红色方块跟着鼠标动松开鼠标后，
再次移动鼠标，方块不动。

封装拖拽函数

要移动的小方块为：

<div style="width: 100px;height: 100px;background-color:
		 red;position: absolute;left:0;top: 0;"></div>

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div style="width: 100px;height: 100px;background-
					color: red;position: absolute;left:0;
					top: 0;"></div>
	<script>
		//封装拖拽函数
		function drag(elem){
   
			var disX,  		//disX disY 为鼠标点击位置与
				disY;		//dom元素左顶点的相对距离