上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件、库比如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. Swift 2.0 自定义cell和不同风格的cell

    昨天我们写了使用系统的cell怎样创建tableView,今天我们再细分一下,就是不同风格的cell,我们怎写代码.先自己创建一个cell,继承于UItableviewcell 我们看看 cell 里 ...

  2. CREELINKS平台_处理器CeCcp资源使用说明(CeCcp的配置与使用)

    0x00 CREELINKS平台简介     CREELINKS(创e联)是由大信科技有限公司研发,集合软硬件.操作系统.数据云储存.开发工具于一体,用于物联网产品的设计.研发与生产的平台.    平 ...

  3. HTML学习二

    继续上一次的学习: <html> <head> <title>新增雇员</title> <script language="javasc ...

  4. Unity 碰撞器和触发器的理解

    要产生碰撞必须为游戏对象添加刚体(Rigidbody)和碰撞器,刚体可以让物体在物理影响下运动.碰撞体是物理组件的一类,它要与刚体一起添加到游戏对象上才能触发碰撞.如果两个刚体相互撞在一起,除非两个对 ...

  5. Spark 键值对RDD操作

    键值对的RDD操作与基本RDD操作一样,只是操作的元素由基本类型改为二元组. 概述 键值对RDD是Spark操作中最常用的RDD,它是很多程序的构成要素,因为他们提供了并行操作各个键或跨界点重新进行数 ...

  6. Python2.7学习笔记-定义函数、filter/map/reduce/lambda

    我把写的代码直接贴在下面了,注释的不是很仔细,主要是为了自己复习时方便查找,并不适合没有接触过python的人看,其实我也是初学者. #定义函数 def my_abs(x): if x>=0: ...

  7. OpenCv 2.4.9 (一) Mat基础结构&如何遍历图片

    前言 因为对图像方面感兴趣,所以有空学学OpenCV的使用,并且希望以此为引子,带领自己入门图像领域. 先post上几个参考网站,上面有完整源码: http://docs.opencv.org/2.4 ...

  8. HttpHelper万能框架V1.6

    下载地址:http://yun.baidu.com/share/link?uk=1745303310&shareid=1343567367 引入:System.Web和System.Web.E ...

  9. Java代码块详解

    Java中代码块指的是用 {} 包围的代码集合,分为4种:普通代码块,静态代码块,同步代码块,构造代码块 普通代码块: 定义:在方法.循环.判断等语句中出现的代码块 修饰:只能用标签修饰 位置:普通代 ...

  10. Spring+CXF的WebServices简单示例

    本文就最简单的WebServices示例来演示Spring和CXF的整合. 使用Maven创建webapp项目,pom如下 <properties> <cxf.version> ...