原生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为完 ...
随机推荐
- Trick 小记
1.\[P(A|BC) = \frac{P(AB|C)}{P(B|C)}\] 2. In EM algorithm, the usual expectation function can be wri ...
- JavaScript截取字符串的Slice、Substring、Substr函数简单比较还有indexof函数应用
//截取字符,一看就明白!!! var str = "0123456789"; alert(str.substring(5)); 弹出 //56789 alert(str.subs ...
- jquery.validate提示错误方法
修改jquery.validate提示错误方法,将错误信息用弹出框提示 <script src="@Url.Content("~/Scripts/jquery.validat ...
- Javascript几种跨域方式总结
在客户端编程语言中如javascript,同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法.只有当两个域具有相同的协议,相同的主机,相同的端口时,我们就认定 ...
- 1.5编程基础之循环控制44:第n小的质数
#include<iostream>#include<cmath>using namespace std;int main(){ int n; cin>>n; in ...
- Python入门教程(2)
人生苦短,我玩蛇0.0! Python(英语发音:/ˈpaɪθən/), 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第一个公开发行版发行于1991 ...
- Linux下,Nginx的安装、升级及动态添加模块
系统基于ubuntu server 14.04.4 amd64 安装 第一步 下载并解压Nginx压缩包 从Nginx官网下载Nginx,或者在Linux上执行wget http://nginx.or ...
- Ionic2 开发笔记(1)ionic2 +angular2搭建
1.去node.js官网下载对应版本https://nodejs.org/en/(不会请看OnsenUi搭载,里面有详细过程) 2.然后通过npm下载Ionic和cordova $ npm insta ...
- 导航栏转场动画CATransition
CATransition动画来实现, 下面的代码是跳转到下一个视图: CATransition *animation = [CATransition animation]; [animation se ...
- 关于wxpython多线程研究包括(import Publisher错误研究)
作为一个自动化测试人员,开发基本的应用桌面程序是必须的!最近在研究wxpython相关知识,目前看到多线程一块,发现官方文档介绍说:"在线程中不能修改修改窗口属性!",但是实际情况 ...