上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件、库比如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. js字符串转日期,js字符串解析成日期,js日期解析, Date.parse小时是8点,Date.parse时间多了8小时

    js字符串转日期,js字符串解析成日期,js日期解析, Date.parse小时是8点,Date.parse时间多了8小时 >>>>>>>>>&g ...

  2. jQuery_第三章_工厂函数

  3. Codeforces Good Bye 2016 题解

    好久没有fst题了...比赛先A了前4题然后发现room里有人已经X完题了没办法只能去打E题,结果差一点点打完...然后C题fst掉了结果就掉rating 了...下面放题解 ### [A. New ...

  4. XML入门知识

    什么是XML? 答:指可扩展标记语言(eXtensible Markup Language),被设计用来传输和存储数据:标签没有被预定义.您需要自行定义标签:被设计为具有自我描述性. XML和HTML ...

  5. synchronized和lock比较浅析

    synchronized是基于jvm底层实现的数据同步,lock是基于Java编写,主要通过硬件依赖CPU指令实现数据同步.下面一一介绍 一.synchronized的实现方案 1.synchroni ...

  6. SQLHELPER 帮助类

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  7. linux 下 zookeeper安装

    1.安装zookeeper-3.4.6cd /usr/soft#解压zookeeper 安装包tar -zvxf zookeeper-3.4.6#拷贝安装包到安装目录cp zookeeper-3.4. ...

  8. tmux进阶之tmuxinator

    tmux进阶之tmuxinator 作者:crane-yuan 日期:2017-03-03 前言 tmuxinator是tmux的配置管理工具,解决了tmux服务器关机后session丢失问题.tmu ...

  9. UCSC genome browser 个人track 安装

    处理基因组数据,很多时候我们会觉得直接看序列文件不够直观,如果绘图的话,把n多G把数据用画图出来不仅费劲,就算操作也不方便.因此我们可以用UCSC开发出的genome browser,可以直接把数据信 ...

  10. Lightbox 图片展示插件

    html <a href="<?php echo RESOURCES_BASE_FOLDER;?>image/default_pic.jpg" target=&q ...