上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件、库比如hammer可以使用,效率也非常好。但我觉得还是有必要了解一下原生JS的实现思路及方式,如下:

  思路:拖动这个操作起始分为三个部分:

    1. 鼠标左键按下,此时才开始可以拖动;
    2. 鼠标移动,拖动开始;根据光标的移动给div相对应的纵轴、横轴的偏移;
    3. 鼠标左键松手,拖动结束,不可以再拖动了。

  每一步需要做的事:

  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实现弹出窗口的拖拽的更多相关文章

  1. js实现弹出框的拖拽

    //HTML部分 <div class="wrap"></div> <div class="popUpBox"> <d ...

  2. [转]js来弹出窗口的详细说明

    1.警告对话框 <script> alert("警告文字") </script> 2.确认对话框 <script> confirm(" ...

  3. jquery-通过js编写弹出窗口

    本文转载 本文主要是通过js动态控制div的高度,css控制浮动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  4. js实现弹出窗口+遮罩层+tab切换

    [功能1]点击约谈按钮,弹出对话框和遮罩层(自己的叫法 专业叫法没有查) [部分重点代码] [下面的方法] (1)获取系统时间如何实现(2)点击如何实现弹出窗口和遮罩层 $(".date_n ...

  5. js实现弹出窗口、页面变成灰色并不可操作的例子

    function show() //显示隐藏层和弹出层 { var hideobj=document.getElementById("hidebg"); hidebg.style. ...

  6. EasyUI, Dialog 在框架页(ifrmae)的Top页面弹出时,拖拽Dialog边缘(以改变窗口大小),UI界面被卡死的解决办法

    将Dialog的modal属性设置为true,可以解决卡死的问题(但会给用户使用体验带来影响) var par = { title: This.title, width: This.width, he ...

  7. 原生js制作弹出框

    完整代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  8. 原生js实现 table表格列宽拖拽

    查看效果 <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title& ...

  9. JS实现当前页弹出窗口,且页面变灰不可操作

    使用JS在当前页面在div中加载弹出窗口,并让当前页面变灰不可操作. 加载弹出窗口的div需将宽高设置成整个页面的大小,以覆盖当前页面的内容. opacity:0.6: 页面可见度设置为0.6(1为完 ...

随机推荐

  1. iOS开发常用

    http://blog.csdn.net/u013043666/article/details/51353386 1.打电话 第一种 NSString *telNum = model.contact; ...

  2. python面向对象编程对象和实例的理解

    给你一个眼神,自己体会

  3. 欢迎来到Devil_lixu的技术博客

    Welcome to my blog 如果你觉得内容对你还有一点点的帮助,那就果断点赞吧^_^

  4. 关于AngularJS学习整理---浅谈$scope(作用域) 新手必备!

    作为初次接触 AngularJS的新手,想要深层理解里面的内容短时间还是不可能的,所以标题写了浅谈字样,以下内容是参考各位大神以及相关书籍整理加个人理解,出现错误的地方请大家指正. $scope(作用 ...

  5. 如何让 Git 忽略掉文件中的特定行内容?

    近期在git遇到几个问题,让我重新认识到git的强大性,下面列出来记录一下 有一个数据库的配置文件,在用 git add 添加到 index file 时不能透露了相关配置.而如果用 .gitigno ...

  6. 第一章 Java语言概述2

    一.编写第一个Java应用程序 1.下载.安装JDK 官方网址:www.oracle.com java.sun.com 安装JDK 傻瓜式安装,下一步即可. 建议:安装路径不要有中文或者特殊符号,如空 ...

  7. 关于margin

    ----W3School -----margin CSS 边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距. 这个简 ...

  8. Android性能测试工具Emmagee

    下面介绍一个简单实用的Android性能软件 ~~欢迎加入测试群574875837一起讨论研究 一.Emmagee 简介 Emmagee主要用于监控单个App的CPU,内存,流量,启动耗时,电量,电流 ...

  9. Nginx的Rewrite规则与实例

    通过Rewrite规则可以实现规范的URL.根据变量来做URL转向及选择配置,用好Rewrite有时起到事半功倍的效果. 语法 Nginx的Rewrite相比Apache的要好理解很多,主要使用指令有 ...

  10. C++ 11 学习3:显示虚函数重载(override)

    5.显示虚函数重载 在 C++ 里,在子类中容易意外的重载虚函数.举例来说: struct Base { virtual void some_func(); }; struct Derived : B ...