js的元素拖拽属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#one{
				width: 300px;
				height: 300px;
				background-color: gold;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="one"></div>
	</body>
</html>
<script type="text/javascript">
	//元素拖拽 就是鼠标去哪里要通过你的event.clientx取值
	//标签跟着去哪里要给其赋值
	//这是方式1 
//	document.onmousemove=function(){
//		console.log(event.clientX,event.clientY);
//		one.style.left=event.clientX+"px";
//		one.style.top=event.clientY+"px";
//	}
	//这是方式2 比较好看
	//我是希望鼠标点击one标签进行拖拽 松手就停
	//而且移动过程中 鼠标和one是相对静止的
	one.onmousedown=function(){
		//鼠标点在了one标签的哪个位置
		var left1=event.offsetX;
		var top1=event.offsetY;
		document.onmousemove=function(){
			one.style.left=event.clientX-left1+"px";
			one.style.top=event.clientY-top1+"px";
		}
	}
	//鼠标弹起 取消移动
	one.onmouseup=function(){
		document.onmousemove=null;
	}
	
</script>

前端三剑客
#JS
js的元素拖拽属性
http://ultracode.cn/2020/12/06/JS/js的元素拖拽属性/
作者
Win
发布于
2020年12月6日
许可协议