基于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 相关文章推荐
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 Javascript
react build 后打包发布总结
Aug 24 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
解决vue2中使用elementUi打包报错的问题
Sep 22 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
日本十大惊悚动漫
2020/03/04 日漫
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
Python实现的一个简单LRU cache
2014/09/26 Python
Python中使用Inotify监控文件实例
2015/02/14 Python
Python Flask-web表单使用详解
2017/11/18 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
如何在django中运行scrapy框架
2020/04/22 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
上班看电影检讨书
2014/02/12 职场文书
大学生社团活动总结
2014/04/26 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
暑期社会实践证明书
2014/11/17 职场文书
太行山上观后感
2015/06/05 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis