原生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 相关文章推荐
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
基于jquery的超简单上下翻
Apr 20 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
详解ES6 Symbol 的用途
Oct 14 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
thinkphp的静态缓存用法分析
2014/11/29 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
loading动画特效小结
2017/01/22 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
python计算n的阶乘的方法代码
2019/10/25 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
python 5个顶级异步框架推荐
2020/09/09 Python
在校学生职业规划范文
2014/01/08 职场文书
《愚公移山》教学反思
2014/02/20 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
森林病虫害防治方案
2014/06/02 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
导游词300字
2015/02/13 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
python如何利用traceback获取详细的异常信息
2021/06/05 Python
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python