js实现弹出窗口的拖拽功能

弹出窗口的拖拽

拖拽功能运用到的有 onmousedown 事件，onmousemove 事件以及 onmouseup 事件

弹出窗口基本步骤：
1、点击点击弹出窗口按钮弹出窗口；
2、窗口弹出后，鼠标点击标题的时候我们需要获取鼠标所在位置的横纵坐标，然后获取盒子离页面的横纵方向的距离；
3、计算出鼠标相对盒子的距离；
4、当鼠标移动的时候，获取鼠标移动的距离，在用鼠标此刻的位置减去鼠标相对盒子的距离，获得的是盒子此刻的坐标位置；
5、将这个位置赋值给盒子；
6、鼠标抬起，清除鼠标移动事件；
7、点击关闭按钮，关闭窗口。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin:0;padding:0;}html,body{width:100%;height:100%;}.box{width:100%;height:100%;background:#ccc;position:relative;display:none;}.box1{width:500px;height:400px;margin:50 auto;background: red;position:absolute;left:300px;top:100px;}h1{width:500px;height:50px;background:yellowgreen;font-size:18px;text-align:center;line-height:50px;position:relative;}p{width:500px;height:350px;background:cyan;}#ipt{position:absolute;left:240px;bottom:10px;}</style></head><body><input type="button" value="点击弹出窗口" id="btn"/><div class="box"><div class="box1"><h1 class="list">窗口标题</h1><p><input type="button" value="关闭" id="ipt"/></p></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){let offsetX = e.pageX - box1.offsetLeftlet offsetY = e.pageY - box1.offsetTopdocument.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>

js实现弹出窗口的拖拽功能相关推荐

html弹出窗口怎么居中显示,HTML页面弹出居中可拖拽的自定义窗口层
使用DIV弹出窗口来动态显示内容的原理:首先采用CSS和HTML隐藏弹窗中的内容,然后利用JavaScript(本教程中是JQuery)来动态显示它们.这种效果不仅能够充分利用有限的版面空间,而且能够 ...
js检测弹出窗口拦截程序
在我们做web编程的时候,经常需要会用到弹出窗口的功能.但是由于很多的广告是以弹出窗口的形式存在的,所以就出现了所谓"弹出窗口拦截器"的功能.在xp打完sp2以后,就会有" ...
【JS案例】：实现盒子拖拽功能
JS小案例:实现盒子拖拽功能 HTML部分: <div id="box"></div> CSS部分: #box{width: 100px;height: 1 ...
移动html触摸效果,JS实现移动端触屏拖拽功能
2.css 3.js = maxW) { oLeft = maxW; } if(oTop < 0) { oTop = 0; } else if(oTop >= maxH) { oTop = ...
html 手机端拖拽效果,JS实现移动端触屏拖拽功能
1.html 2.css * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } #div1 { width: 5 ...
JS 父子(弹出)窗口操作总结
//关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write("<script language=javascript>window.close();< ...
【vue弹框和div拖拽功能】vue-elementul弹框拖拽功能，移动拖拽功能，普通div拖拽功能【拿来即用，直接复制】
前言这里是通过vue的指令封装好的直接创建一个js文件复制进去,引入一下就搞定了,非常简单 html版本引入vue语法的div和弹框拖拽功能这里是考虑到有时候会在html页面开发的时候也会用到这 ...
2022-03-26 原生js实现一个点击弹出的可拖拽登录框(待编辑)
点击,弹出登录框登录会员关闭用户名: 登录密码: 登录会员 // 获取元素 var link = document.getElementById('link'); //点击的文字 var bg ...
.NET, MVC框架下利用html, CSS,js实现弹出窗口
在前端UI交互过程中,经常会碰到需要弹出对话框的情况.通过html+css+js来自定义对话框是一个不错的方法. 1. 在HTML中,定义一个DIV. 1.1 将Style设置为 display:no ...

js实现弹出窗口的拖拽功能

弹出窗口的拖拽

js实现弹出窗口的拖拽功能相关推荐

最新文章

热门文章