鼠标拖动div移动

最新推荐文章于 2023-08-09 16:08:28 发布

Curry 3O

最新推荐文章于 2023-08-09 16:08:28 发布

阅读量2.1k

点赞数 5

分类专栏： JS jQuery html和css

本文链接：https://blog.csdn.net/qq_42552393/article/details/98366092

版权

JS 同时被 3 个专栏收录

33 篇文章 0 订阅

订阅专栏

jQuery

10 篇文章 1 订阅

订阅专栏

html和css

6 篇文章 0 订阅

订阅专栏

实现鼠标能够拖动div

实现div的随意拖拽，需要注意的就是不能拖着拖着div在浏览器里面消失，因此需要进行位置计算。

示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标拖动div</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: pink;
			position: absolute;
		}
	</style>
	<script>
		window.onload = function(){
			var one = document.getElementById('one');
			//判断鼠标是否按下
			var p = false;
			//鼠标按下处在页面中的水平偏移
			var dx = 0;
			//鼠标按下处在页面中的垂直偏移
			var dy = 0;
			//div在页面中的水平偏移
			var sx = 0;
			//div在页面中的垂直偏移
			var sy = 0;

			//鼠标按下时
			one.onmousedown = function(event){
				if (!p) {
					p = true;
				}
				//处理兼容性和滚动条
				var event = event || window.event;
				var scrollLeft = document.documentElement.scrollLeft;
				var scrollTop = document.documentElement.scrollTop;
				var pageX = event.pageX || event.clientX + scrollLeft;
				var pageY = event.pageY || event.clientY + scrollTop;
			 	dx = pageX;
			 	dy = pageY;
			 	sx = one.offsetLeft;
			 	sy = one.offsetTop;
			} 

			//鼠标移动时
			document.onmousemove = function(event){
				if (p) {
					var event = event || window.event;
					var scrollLeft = document.documentElement.scrollLeft;
					var scrollTop = document.documentElement.scrollTop;
					var pageX = event.pageX || event.clientX + scrollLeft;
					var pageY = event.pageY || event.clientY + scrollTop;
					one.style.left = pageX - (dx - sx) + 'px';
					one.style.top = pageY - (dy - sy) + 'px';
				}
			}

			//鼠标松开时
			document.onmouseup = function(){
				if (p) {
					p = false;
				}
			}
		}
	</script>
</head>
<body>
	<div id="one"></div>
</body>
</html>

运行效果:

在这里插入图片描述

补充：

以所有属性下均不带单位，可用于计算

在原生 `js` 中：

offsetWidth : 元素的宽度值
offsetHeight : 元素的高度值
offsetLeft : 元素的水平偏移
offsetTop : 元素的垂直偏移
clientX : 元素在当前窗口中的水平偏移量
clientY : 元素在当前窗口中的垂直偏移量
clientWidth : 元素的宽度值(不包括边框)
clientHeight : 元素的高度值(不包括边框)
pageX : 元素在页面中的水平偏移
pageY : 元素在页面中的垂直偏移
pageX : clientX + scrollLeft
pageY : clientY + scrollTop
screenX : 元素在屏幕中水平偏移
screenY : 元素在屏幕中垂直偏移
scrollLeft : 滚动条的水平偏移距离
scrollTop : 滚动条的垂直偏移距离
scrollWidth : 水平滚动条能滚动的距离
scrollHeight : 垂直滚动条能滚动的距离

在 `jQuery` 中：

offset().left : 元素水平偏移量 ,只能获取不能设置
offset().top : 元素垂直偏移量 ,只能获取不能设置
scrollLeft : 获取或设置水平滚动条的滚动距离
scrollTop :获取或设置垂直滚动条的滚动距离

Curry 3O

关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
鼠标拖动div移动

实现鼠标能够拖动div实现div的随意拖拽，需要注意的就是不能拖着拖着div在浏览器里面消失，因此需要进行位置计算。示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>鼠标拖动div</title> <style&gt...
复制链接

扫一扫