原生js实现自由拖拽弹窗代码demo


Posted in Javascript onJune 29, 2016

本文为大家分享了原生弹窗拖拽代码demo,供大家参考,具体内容如下

效果图:

原生js实现自由拖拽弹窗代码demo

实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>弹窗拖拽</title>
  <style>
    *{margin:0;padding:0;}
    .box{position: absolute;width: 400px;height: 300px;top:100px;left:100px;border:1px solid #001c67;background: #}
    .move{position: absolute;width: 100px;height: 100px;top:100px;left:150px;border:1px solid #000;}
    .move:hover{cursor: move;}
    .close{position: absolute;width: 30px;height: 30px;top:0px;right:0px;background:red;text-align: center;line-height: 30px;}
  </style>
  <script>
    window.onload=function(){
      var oMove=document.getElementById('move');
      // 拖曳
      oMove.onmousedown=fnDown;
      // 关闭
      var oClose=document.getElementById('close');
      oClose.onclick=function(){
       document.getElementById('box').style.display='none';
      }
    }
    function fnDown(event){
      event = event || window.event;
      var oDrag=document.getElementById('box'),
        // 光标按下时光标和面板之间的距离
        disX=event.clientX-oDrag.offsetLeft,
        disY=event.clientY-oDrag.offsetTop;
      // 移动
      document.onmousemove=function(event){
        event = event || window.event;
        var l=event.clientX-disX,
          t=event.clientY-disY,
          // 最大left,top值
          leftMax=(document.documentElement.clientWidth || document.body.clientWidth)-oDrag.offsetWidth,
          topMax=(document.documentElement.clientHeight || document.body.clientHeight)-oDrag.offsetHeight;
        if(l<0) l=0;
        if(l>leftMax) l=leftMax;
        if(t<0) t=0;
        if(t>topMax) t=topMax;
        oDrag.style.left=l+'px';
        oDrag.style.top=t+'px';
      }
      // 释放鼠标
      document.onmouseup=function(){
        document.onmousemove=null;
        document.onmouseup=null;
      }
    }
  </script>
</head>
<body>
  <div class="box" id="box">
    <div class="move" id="move">拖拽区域</div>
    <div class="close" id="close">X</div>
  </div>
</body>
</html>

主要注意几点
 1.event,IE兼容问题 
 2.点击鼠标时要先判断鼠标与面板之间的距离
 3.要判断弹窗与浏览器整个区域的距离,不能让弹窗跑出浏览器外的区域 
 4.松开鼠标要解除事件绑定,不然会有bug

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript英文日期(有时间)选择器
May 02 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
12306验证码破解思路分享
Mar 25 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 #Javascript
简单实现js间歇或无缝滚动效果
Jun 29 #Javascript
js精准的倒计时函数分享
Jun 29 #Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 #Javascript
RequireJS多页面应用实例分析
Jun 29 #Javascript
全面了解JS中的匿名函数
Jun 29 #Javascript
大型JavaScript应用程序架构设计模式
Jun 29 #Javascript
You might like
yii操作session实例简介
2014/07/31 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
跟老齐学Python之一个免费的实验室
2014/09/14 Python
python如何读取bin文件并下发串口
2019/07/05 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
互动出版网:专业书籍
2017/03/21 全球购物
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
《晏子使楚》教学反思
2014/02/08 职场文书
汽车促销活动方案
2014/03/31 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
专家推荐信模板
2014/05/09 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
广播体操口号
2014/06/18 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
小学三年级数学教学反思
2016/02/16 职场文书