原生JS实现弹出窗口的拖拽
上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件、库比如hammer可以使用,效率也非常好。但我觉得还是有必要了解一下原生JS的实现思路及方式,如下:
思路:拖动这个操作起始分为三个部分:
- 鼠标左键按下,此时才开始可以拖动;
- 鼠标移动,拖动开始;根据光标的移动给div相对应的纵轴、横轴的偏移;
- 鼠标左键松手,拖动结束,不可以再拖动了。
每一步需要做的事:
1中需要将初始化的拖动标示量置为true(可以拖动了)、记录光标起始坐标和div的起始坐标
2中记录光标移动量,并将光标偏移量实时反映到div的坐标位置中去,div坐标实时同步光标移动,从而达到拖动效果
3拖动标示量置为false(不可以拖动了)
具体实现拖拽的JS代码:
function DivMove(divId, h2Tag) {
var oWin = document.getElementById(divId);
var oH2 = oWin.getElementsByTagName(h2Tag)[];
var bDrag = false;
var disX = disY = ;
oH2.onmousedown = function (event) {
var event = event || window.event;
bDrag = true;
disX = event.clientX - oWin.offsetLeft;
disY = event.clientY - oWin.offsetTop;
this.setCapture && this.setCapture();
return false
};
document.onmousemove = function (event) {
if (!bDrag) return;
var event = event || window.event;
var iL = event.clientX - disX;
var iT = event.clientY - disY;
var maxL = document.documentElement.clientWidth - oWin.offsetWidth;
var maxT = document.documentElement.clientHeight - oWin.offsetHeight;
iL = iL < ? : iL;
iL = iL > maxL ? maxL : iL;
iT = iT < ? : iT;
iT = iT > maxT ? maxT : iT;
oWin.style.marginTop = oWin.style.marginLeft = ;
oWin.style.left = iL + "px";
oWin.style.top = iT + "px";
return false
};
document.onmouseup = window.onblur = oH2.onlosecapture = function () {
bDrag = false;
oH2.releaseCapture && oH2.releaseCapture();
};
}
原生JS实现弹出窗口的拖拽的更多相关文章
- js实现弹出框的拖拽
//HTML部分 <div class="wrap"></div> <div class="popUpBox"> <d ...
- [转]js来弹出窗口的详细说明
1.警告对话框 <script> alert("警告文字") </script> 2.确认对话框 <script> confirm(" ...
- jquery-通过js编写弹出窗口
本文转载 本文主要是通过js动态控制div的高度,css控制浮动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- js实现弹出窗口+遮罩层+tab切换
[功能1]点击约谈按钮,弹出对话框和遮罩层(自己的叫法 专业叫法没有查) [部分重点代码] [下面的方法] (1)获取系统时间如何实现(2)点击如何实现弹出窗口和遮罩层 $(".date_n ...
- js实现弹出窗口、页面变成灰色并不可操作的例子
function show() //显示隐藏层和弹出层 { var hideobj=document.getElementById("hidebg"); hidebg.style. ...
- EasyUI, Dialog 在框架页(ifrmae)的Top页面弹出时,拖拽Dialog边缘(以改变窗口大小),UI界面被卡死的解决办法
将Dialog的modal属性设置为true,可以解决卡死的问题(但会给用户使用体验带来影响) var par = { title: This.title, width: This.width, he ...
- 原生js制作弹出框
完整代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- 原生js实现 table表格列宽拖拽
查看效果 <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title& ...
- JS实现当前页弹出窗口,且页面变灰不可操作
使用JS在当前页面在div中加载弹出窗口,并让当前页面变灰不可操作. 加载弹出窗口的div需将宽高设置成整个页面的大小,以覆盖当前页面的内容. opacity:0.6: 页面可见度设置为0.6(1为完 ...
随机推荐
- 如何利用fis3来模拟后台返回数据
Node 版本要求 0.8.x,0.10.x, 0.12.x,4.x,6.x,不在此列表中的版本不予支持.最新版本 node 支持会第一时间跟进,支持后更新支持列表 1.安装fis3 npm inst ...
- xml类型转换列表显示 SQL查询
数据库中存在字段类型为xml 的数据, 现举例 xml 字段存储的数据为: <MortgageInfoShipList> <ITEMS> <ITEM> <Sh ...
- Monit:开源服务器监控工具
Monit是一个跨平台的用来监控Unix/linux系统(比如Linux.BSD.OSX.Solaris)的工具.Monit特别易于安装,而且非常轻量级(只有500KB大小),并且不依赖任何第三方程序 ...
- 【Scala】Scala之Classes and Properties
一.前言 前面学习了控制结构,下面学习Scala的Class和Properties. 二.Class&Properties 尽管Scala和Java很类似,但是对类的定义.类构造函数.字段可见 ...
- 用Tcl/Tk脚本计算圆周率
读了阮一峰的蒙特卡罗方法入门,用概率统计的方式求解棘手的数学问题还挺有意思的,尤其是利用正方形和它的内切圆之间的面积关系来建模求解圆周率的方法精巧又简单,比投针实验好理解也好实现多了.建模可不是M ...
- 关于Mysql的索引
索引是指把你设置为索引的字段A的内容储存在一个独立区间S里,里面只有这个字段的内容.在找查这个与这个字段A的内容时会直接从这个独立区间里查找,而不是去到数据表里查找.找到的这些符合条件的字段后再读取字 ...
- Sicily 1151 魔板
Constraints Time Limit: 1 secs, Memory Limit: 32 MB , Special Judge Description 魔板由8个大小相同方块组成,分别用涂上不 ...
- HttpHeplp 公共类 HttpWebRequest
public class HttpHelp { public CookieContainer CookieContainer { get; set; } public CookieCollection ...
- LINUX RHEL6.5字符界面安装图形化桌面
安装RHEL 6.5 系统,也是一波三折.好不容易把系统装上去了,发现没装图形化界面.重装倒是学会了,不过觉得太麻烦,于是有了今天. 查了很多帖子,然后自己一一尝试,发现都是说简单,只要 yum gr ...
- 【JSON学习之道】js操作JSON
JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧. JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON ...