jQuery中的拖拽

Gypsophila 、

于 2020-10-04 20:23:24 发布

阅读量641

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/O_326326/article/details/108922148

版权

本文介绍了使用jQuery实现拖拽效果的基本步骤，包括鼠标在元素和浏览器上的坐标位置、相关事件监听（onmousedown, onmousemove, onmouseup）以及获取元素尺寸和位置的方法。通过这些知识点，可以创建简单的拖拽效果，甚至支持多个元素拖拽。" 115819533,10545142,MATLAB中Halton序列的使用及伪随机数生成器分析,"['MATLAB', '随机数生成', 'Halton序列']

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

1：鼠标在元素上的坐标位置
offsetX
offsetY
2:鼠标在浏览器（可视窗口）上的坐标位置
clientX
clientY
3：事件
onmousedown 鼠标按下
onmousemove 鼠标移动
onmouseup 鼠标弹起
4:可视窗口的宽度和高度
document.documentElement.clientWidth
document.documentElement.clientHeight
5:获取元素的宽高
offsetWidth
offsetHeight
6:获取元素到浏览器窗口的距离
offsetLeft
offsetTop

简单拖拽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
    
				margin: 0;
				padding: 0;
			}
			div{
    
				width: 100px;
				height: 100px;
				background: pink;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
	<script type="text/javascript">
//		e.offsetX   e.offsetY是光标在当前元素上的坐标位置