js#原生#拖拽组件的实现

最新推荐文章于 2024-07-05 10:50:31 发布

.Passion

最新推荐文章于 2024-07-05 10:50:31 发布

阅读量532

点赞数 1

本文链接：https://blog.csdn.net/qq_43923045/article/details/107116710

版权

前端专栏收录该内容

43 篇文章 0 订阅

订阅专栏

实现拖拽组件

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box {
				position: relative;
				width: 200px;
				height: 20px;
				background: red;
				cursor: move;
			}

			.parent {
				border: 1px solid #0000FF;
				position: absolute;
			}
		</style>
	</head>

	<body>
		<div class="parent" id='parent'>
			<div id="box"></div>
			<div>
				hello world
			</div>
			<div>welcome to login</div>
			<form action="">
				<input type="text" placeholder="输入用户名字"><br>
				<input type="password" placeholder="输入用户名字"><br>
				<button type='button'>login </button><br>
			</form>

		</div>
	</body>
	<script type="text/javascript">
		var box = document.getElementById("box");
		var parent = document.getElementById("parent");
	</script>

	<script type="text/javascript">
		box.onmousedown = function(event) {
			var e = event || window.event;
			var dx = event.clientX - parent.offsetLeft
			var dy = event.clientY - parent.offsetTop
			if (typeof box.setCapture !== 'undefined') {
				box.setCapture();
			}

			// 鼠标按下 定义事件
			//鼠标松开 取消事件
			document.onmousemove = function(e) {
				var e = e || window.event
				var X = e.clientX - dx
				var Y = e.clientY - dy
				if (X < 0) {
					X = 0
				} else if (X > window.innerWidth - parent.offsetWidth) {
					X = window.innerWidth - parent.offsetWidth
				}
				if (Y < 0) {
					Y = 0
				} else if (Y > window.innerHeight - parent.offsetHeight) {
					Y = window.innerHeight - parent.offsetHeight
				}
				parent.style.left = X + 'px'
				parent.style.top = Y + 'px'
			}
			document.onmouseup = function() {
				this.onmousemove = null
				this.onmouseup = null
				if (typeof box.releaseCapture != 'undefined') {
					box.releaseCapture()
				}
			}



		}
	</script>


</html>

.Passion

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js#原生#拖拽组件的实现

实现拖拽组件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box { position: relative; width: 200px; height: 20px; background: red; cursor: mov
复制链接

扫一扫

专栏目录