基于JavaScript实现窗口拖动效果


Posted in Javascript onJanuary 18, 2017

写法类似于上一篇,水平进度条拖拽,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .nav{
      width: 100%;
      height: 20px;
      background-color: #ccc;
    }
    .popup{
      width: 300px;
      height: 300px;
      border: 1px solid red;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -150px;
      margin-top: -150px;
    }
    .popup .title{
      height: 20px;
      width: 100%;
      background: deeppink;
      cursor: move;
    }
  </style>  
</head>
<body>
  <div class="nav">注册信息</div>
  <div class="popup" id="popupfather">
    <div class="title" id="popupson">我是窗口标题,可拖着我走</div>
    <div class="content">我是窗口内容</div>
  </div>
  <script>  
    var popupfather = document.getElementById('popupfather');
    var popupson = document.getElementById('popupson');

    popupson.onmousedown = function(event){
      var event = event || window.event;
      var that = this;
      var x = event.clientX - popupfather.offsetLeft - 150; //当前鼠标点击处相对于popupfather所在位置x , -150 是处理margin值
      var y = event.clientY - popupfather.offsetTop - 150; //当前鼠标点击处相对于popupfather所在位置y
      document.onmousemove = function(event){
        var event = event || window.event;
        popupfather.style.left = event.clientX - x + "px";
        popupfather.style.top = event.clientY- y + "px";
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

      }
    }
    document.onmouseup = function(){
      document.onmousemove = null;
    }
  </script>
</body>
</html>

效果图:

基于JavaScript实现窗口拖动效果

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

Javascript 相关文章推荐
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
微信小程序上传图片实例
May 28 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 Javascript
解决elementui表格操作列自适应列宽
Dec 28 Javascript
原生js实现节日时间倒计时功能
Jan 18 #Javascript
原生js实现返回顶部缓冲效果
Jan 18 #Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 #Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 #Javascript
js实现简单的网页换肤效果
Jan 18 #Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 #Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 #Javascript
You might like
编译问题
2006/10/09 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
短信提示使用 特效
2007/01/19 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
JavaScript 自定义事件之我见
2017/09/25 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
实例讲解python函数式编程
2014/06/09 Python
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
高二美术教学反思
2014/01/14 职场文书
国旗下的演讲稿
2014/05/08 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
2014和解协议书范文
2014/09/15 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
2015年统战工作总结
2015/05/19 职场文书
行政二审代理词
2015/05/25 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang