js实现弹窗拖拽功能

最新推荐文章于 2024-04-30 16:17:31 发布
最新推荐文章于 2024-04-30 16:17:31 发布
阅读量1.1k 收藏 2
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56164131/article/details/121562344
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			a {
				text-decoration: none;
			}
			html,
			body {
				width: 100%;
				height: 100%;
			}
			.box {
				width: 100%;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				height: 100%;
				background: rgba(0, 0, 0, 0.4);
				position: fixed;
				display: none;
			}

			.box1 {
				width: 60%;
				height: 60%;
				margin: 50 auto;
				background: #fff;
				position: absolute;
				left: 300px;
				top: 100px;
				border-radius: 2px;
				box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
			}
			.list {
				height: 50px;
				background-color: #4491e1;
				font-size: 18px;
				line-height: 50px;
				position: relative;
				padding: 0 20px;
				display: flex;
				justify-content: space-between;
				color: #fff;
			}
			#ipt {
				color: #fff;
			}
		</style>
	</head>
	<body>
		<input type="button" value="点击弹出窗口" id="btn" />
		<div class="box">
			<div class="box1">
				<div class="list">
					<div>标题</div>
					<a href="javascript:;" id="ipt">x</a>
				</div>
				<div>放内容</div>
			</div>
		</div>
		<script type="text/javascript">
			//点击按钮弹出窗口
			let btn = document.querySelector('#btn')
			let box = document.querySelector('.box')
			btn.onclick = function() {
				// btn.style.display = 'none'	
				box.style.display = 'block'
			}
			//点击按钮关闭窗口
			let ipt = document.querySelector('#ipt')
			ipt.onclick = function() {
				box.style.display = 'none'
				btn.style.display = 'block'
			}
			//拖拽
			let list = document.querySelector('.list')
			let box1 = document.querySelector('.box1')
			list.onmousedown = function(e) {
				console.log(e);
				console.log(box1.offsetLeft);
				console.log(box1.offsetTop);
				let offsetX = e.pageX - box1.offsetLeft
				let offsetY = e.pageY - box1.offsetTop

				document.onmousemove = function(d) {
					let left = d.pageX - offsetX;
					let top = d.pageY - offsetY;

					box1.style.left = left + 'px'
					box1.style.top = top + 'px'
				}
				//鼠标抬起，清除鼠标移动事件			
				document.onmouseup = function() {
					document.onmousemove = null;
				}
			}
		</script>
	</body>
</html>

陈琦鹏
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
js实现弹出div任意拖拽
08-17
js实现弹出div任意拖拽
js实现弹出窗口的拖拽功能
weixin_46390620的博客
03-01 1079
弹出窗口的拖拽 拖拽功能运用到的有 onmousedown 事件，onmousemove 事件以及 onmouseup 事件 弹出窗口基本步骤： 1、点击点击弹出窗口按钮弹出窗口； 2、窗口弹出后，鼠标点击标题的时候我们需要获取鼠标所在位置的横纵坐标，然后获取盒子离页面的横纵方向的距离； 3、计算出鼠标相对盒子的距离； 4、当鼠标移动的时候，获取鼠标移动的距离，在用鼠标此刻的位置减去鼠标相对盒子的...
JavaScript-自制网页内弹窗[可移动][DOM][纯HTML]
TDTX博客
10-15 1662
实现思路 - 编写弹窗样式，display默认为none，position为absolute; - 点击弹出窗口按钮，弹出的display会设置为block，即可显示弹窗； - 编写弹窗的鼠标按下、抬起、移动、区域离开事件函数 - 在移动时候，获取当前鼠标x/y与上一个鼠标x/y的差值deltaX/deltaY, 然后计算新的距离父组件的左距离、上距离， 设定该窗口的ddDiv.style.left 、addDiv.style.top即可让弹窗跟随鼠标的移动； - 在点击弹窗内“确认”、“取消”按钮
elementui中el-dialog弹窗移动缩放大小（保留上次位置大小）
weixin_43123984的博客
02-10 5192
效果演示 一、创建一个dialog.js文件，并在main.js中进行引入 import Vue from 'vue' // v-dialogDrag: 弹窗拖拽属性 Vue.directive('dialogDrag', { bind (el, binding, vnode, oldVnode) { // 自定义属性，判断是否可拖拽 if (!binding.value) return const dialogHeaderEl = el.querySelector('.el-
原生js实现遮罩层及可拖拽的弹出窗口
u010234868的专栏
09-15 531
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body, h4 { margin: 0; padding: 0; } a { width: 300px; font-size: 30px; color: #000; text-de.
JS弹出框实现拖拽移动和修改宽高的功能
qq_53868229的博客
06-05 825
这里写自定义目录标题拖拽移动拖拽修改宽高完整代码 拖拽移动 通过定义dom节点的onmousedown函数，可以实现对拖拽事件的处理： 创建div： const popup = document.createElement('div'); popup.style.position = 'absolute'; popup.style.top = '50px'; popup.style.left = '50px'; popup.style.zIndex = 1; popup.style.cursor = "mo
js实现拖拽弹框
m96626的博客
10-26 568
比较简洁的弹框拖拽，揉吧揉吧，重新整理了一下。距离的算法比较麻烦，所以最后加了图解。前端小白，希望一起进步^o^。 &lt;style type="text/css"&gt; *{margin:0;padding:0;} .box{position: absolute;width: 400px;height: 300px;top:100px;left:100px;border:...
让一个定位的盒子水平垂直居中
Jack_13201的博客
08-28 866
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
js 弹窗拖动
qq_46126127的博客
05-26 326
<!DOCTYPE html> <html> <head> <title>测试</title> <style> html { font-size: 14px; } html, body { margin: 0; padding: 0; height: 100.
js可拖拽弹窗
喵喵喵~~~的博客
02-23 333
alertWin('审核提示','',400,200,id); function alertWin(title, msg, w, h, id) { var titleheight = "22px"; // 窗口标题高度 var bordercolor = "#666699"; //窗口的边框颜色 var titlecolor = "#FFFFFF"; // 窗口的标题颜色 var titlebgcolor = "#666699"; //..
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
10-23
主要介绍了JS实现弹出浮动窗口,可支持鼠标拖动和关闭的功能,界面美观大方,涉及javascript动态创建对话框的相关技巧,需要的朋友可以参考下
JS实现可拖曳、可关闭的弹窗效果
10-23
主要介绍了JS实现可拖曳、可关闭的弹窗效果,可实现点击文字弹出可拖动的窗口,同时背景出现变暗的遮罩效果,点击遮罩层即可关闭弹出,具有一定参考借鉴价值,需要的朋友可以参考下
js弹出框-弹出层-拖拽-兼容
04-25
js弹出框-弹出层-拖拽-兼容 以前自己用的一个小插件。 纯js写的。 以前网上资料下的。 经过修改之后，兼容以及效果比较好用。 简单而精炼。 不需要jquery。
原生js实现自由拖拽弹窗代码demo
10-22
主要为大家详细介绍了原生js实现弹窗拖拽代码demo，以及在实现js弹窗拖拽效果需要注意的事项，感兴趣的小伙伴们可以参考一下
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
10-26
js弹窗想必大家都有见到过吧，如何要说可以自由拖拽，并兼容大部分浏览器的就没有几个了吧，本文的这个示例或许是大家要找的，可以参考下
原生JS可拖动弹窗效果实例代码
10-26
介绍了原生JS可拖动弹窗效果实例代码，有需要的朋友可以参考一下
判断前端入参是否空否则提示前端写法
qq_39306234的博客
04-28 327
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
前端调用WebSocket协议接口获取数据
m0_56023096的博客
04-29 430
createWs("测试数据", (res) => {
uni框架下的前端小知识
最新发布
weixin_53908842的博客
04-30 315
1、direction：移动方向，可选值为all、vertical、horizontal分别表示所有方向、垂直、水平方向。3、out-of-bunds：移动超出界限是的处理策略，可选值为fail, bounce,分别表示失败、回弹。9、 scale-value:缩放的值，当scale为true时有效。7、friction:摩擦系数，取值范围【0，100】6、damping:阻尼系数，取值范围【0，100】8、scale：缩放比例，取值范围【0.5，10】4、x:水平方向的移动距离，单位制px。
vue 指令实现弹窗拖拽和拉伸
08-30
在Vue中，可以通过自定义指令实现弹窗的拖拽和拉伸功能。 首先，对于拖拽功能，可以创建一个自定义指令`v-draggable`。在该指令的绑定元素上设置`mousedown`事件监听器，当鼠标按下时触发拖拽操作。在`mousemove`和`mouseup`事件监听器中处理鼠标移动和释放的逻辑。具体代码如下： ```javascript Vue.directive('draggable', { bind(el) { el.style.position = 'absolute'; el.addEventListener('mousedown', startDrag); function startDrag(e) { const startX = e.clientX; const startY = e.clientY; const initialX = el.offsetLeft; const initialY = el.offsetTop; document.addEventListener('mousemove', dragElement); document.addEventListener('mouseup', releaseElement); function dragElement(e) { el.style.left = `${initialX + (e.clientX - startX)}px`; el.style.top = `${initialY + (e.clientY - startY)}px`; } function releaseElement() { document.removeEventListener('mousemove', dragElement); document.removeEventListener('mouseup', releaseElement); } } } }); ``` 接下来，对于拉伸功能，可以创建一个自定义指令`v-resizable`。在该指令的绑定元素上设置`mousedown`事件监听器，当鼠标按下时触发拉伸操作。在`mousemove`和`mouseup`事件监听器中处理鼠标移动和释放的逻辑。具体代码如下： ```javascript Vue.directive('resizable', { bind(el) { el.style.position = 'absolute'; el.style.resize = 'both'; el.addEventListener('mousedown', startResize); function startResize(e) { const startX = e.clientX; const startY = e.clientY; const initialWidth = el.offsetWidth; const initialHeight = el.offsetHeight; document.addEventListener('mousemove', resizeElement); document.addEventListener('mouseup', releaseElement); function resizeElement(e) { el.style.width = `${initialWidth + (e.clientX - startX)}px`; el.style.height = `${initialHeight + (e.clientY - startY)}px`; } function releaseElement() { document.removeEventListener('mousemove', resizeElement); document.removeEventListener('mouseup', releaseElement); } } } }); ``` 最后，在需要拖拽和拉伸的弹窗组件上使用`v-draggable`和`v-resizable`指令即可实现相应功能。例如： ```html <template> <div class="modal" v-draggable v-resizable> <!-- 弹窗内容 --> </div> </template> ``` 通过上述自定义指令的方式，我们可以在Vue中实现弹窗的拖拽和拉伸功能，提升用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陈琦鹏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值