（js）拖拽

最新推荐文章于 2023-09-25 17:34:54 发布

深海有鱼呀

最新推荐文章于 2023-09-25 17:34:54 发布

阅读量70

点赞数

分类专栏：常用功能与方法

本文链接：https://blog.csdn.net/weixin_42069147/article/details/115451707

版权

常用功能与方法专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body {
        height: 100%;
        overflow: hidden;
        }
        .box {
            position:absolute;
            top: 0px;
            left: 0px;
            width: 100px;
            height: 100px;
            background-color: red;
            cursor: move;
        }
    </style>
</head>

<body>
    <div class="box" id="box"></div>

    <script>

        box.onmousedown = down

        // box.addEventListener('mousedown',down)


        function down(ev){
            // 把鼠标起始位置存到box的自定义属性上
            this.startX = ev.pageX
            this.startY = ev.pageY
            this.startL = this.offsetLeft
            this.startT = this.offsetTop

            document.onmousemove = move.bind(this)
            document.onmouseup = up.bind(this)

            // this._move = move.bind(this)
            // this._up = up.bind(this)
            // document.addEventListener('mousemove',this._move)
            // document.addEventListener('mouseup',this._up )
        }

        function move(ev){
            // 随时获取当前鼠标的信息，计算盒子最新高度
            let curL = ev.pageX - this.startX + this.startL
            curT = ev.pageY - this.startY + this.startT

            // =>边界判断
            let minL = 0,
                minT = 0,
                maxL = document.documentElement.clientWidth - this.offsetWidth,
                maxT = document.documentElement.clientHeight - this.offsetHeight;
                curL = curL < minL ? minL : (curL > maxL ? maxL :curL);
                curT = curT < minT ? minT : (curT > maxT ? maxT :curT);
            this.style.left = curL + 'px'
            this.style.top = curT + 'px'
        }

        function up(ev){
            // 鼠标抬起移除move事件
            document.onmousemove = null
            document.onmouseup = null

            // document.removeEventListener('mousemove',this._move)
            // document.removeEventListener('mouseup',this._up )
        }

        

    </script>
</body>

</html>

模拟百度登录框只有顶部可以拖拽
在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<!-- IMPORT CSS -->
	<link rel="stylesheet" href="reset.min.css">
	<style>
		html,body {
			width: 100%;
			height: 100%;
		}
		/* ==DIALOG== */
		.ZF-DIALOG {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9998;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .8);
			user-select: none;
			transition: opacity .3s;
		}

		.ZF-DIA-MAIN {
			position: absolute;
			top: 100px;
			left: 50%;
			margin-left: -200px;
			z-index: 9999;
			width: 400px;
			background: #FFF;
			border-radius: 3px;
			transition: transform .3s;
		}

		.ZF-DIA-HEADER {
			position: relative;
			box-sizing: border-box;
			padding: 0 10px;
			height: 40px;
			line-height: 40px;
			background: #2299EE;
			cursor: move;
		}

		.ZF-DIA-TITLE {
			font-size: 18px;
			color: #FFF;
			font-weight: normal;
		}

		.ZF-DIA-CLOSE {
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
			font-size: 24px;
			font-style: normal;
			color: #FFF;
			font-family: 'Courier New';
			cursor: pointer;
		}

		.ZF-DIA-BODY {
			padding: 30px 10px;
			line-height: 30px;
			font-size: 16px;
		}

		.ZF-DIA-FOOTER {
			text-align: right;
			padding: 10px 10px;
			border-top: 1px solid #EEE;
		}

		.ZF-DIA-CONFIRM,
		.ZF-DIA-CANCEL {
			margin: 0 5px;
			padding: 0 15px;
			height: 28px;
			line-height: 28px;
			border: none;
			font-size: 14px;
			cursor: pointer;
		}

		.ZF-DIA-CONFIRM {
			color: #FFF;
			background: #2299EE;
		}

		.ZF-DIA-CANCEL {
			color: #000;
			background: #DDD;
		}
	</style>
</head>

<body>
	<!-- DIALOG -->
	<div class="ZF-DIALOG">
		<div class="ZF-DIA-MAIN">
			<div class="ZF-DIA-HEADER">
				<h3 class="ZF-DIA-TITLE">系统温馨提示</h3>
				<i class="ZF-DIA-CLOSE">X</i>
			</div>
			<div class="ZF-DIA-BODY">
				用户名密码不匹配，请重新输入!
			</div>
			<div class="ZF-DIA-FOOTER">
				<button class="ZF-DIA-CONFIRM">确定</button>
				<button class="ZF-DIA-CANCEL">取消</button>
			</div>
		</div>
	</div>

	<script>
		let $MAIN = document.querySelector('.ZF-DIA-MAIN'),
			$HEADER = document.querySelector('.ZF-DIA-HEADER'),
			$DIALOG = document.querySelector('.ZF-DIALOG');
		$HEADER.addEventListener('mousedown', down);

		function down(ev) {
			this.startX = ev.clientX;
			this.startY = ev.clientY;
			this.startT = $MAIN.offsetTop;
			this.startL = $MAIN.offsetLeft;
			this._MOVE = move.bind(this);
			this._UP = up.bind(this);
			document.addEventListener('mousemove', this._MOVE);
			document.addEventListener('mouseup', this._UP);
		}

		function move(ev) {
			let curL = ev.clientX - this.startX + this.startL,
				curT = ev.clientY - this.startY + this.startT;
			let minL = 0,
				minT = 0,
				maxL = $DIALOG.offsetWidth - $MAIN.offsetWidth,
				maxT = $DIALOG.offsetHeight - $MAIN.offsetHeight;
			curL = curL < minL ? minL : (curL > maxL ? maxL : curL);
			curT = curT < minT ? minT : (curT > maxT ? maxT : curT);
			$MAIN.style.left = curL + 'px';
			$MAIN.style.top = curT + 'px';
			$MAIN.style.marginLeft = 0;
		}

		function up(ev) {
			document.removeEventListener('mousemove', this._MOVE);
			document.removeEventListener('mouseup', this._UP);
		}
		
	</script>
</body>

</html>

深海有鱼呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（js）拖拽

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
复制链接

扫一扫