<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    * {margin: 0; padding: 0; }

    body, textarea, select, input, button {font-size: 12px; color: #fff; font-family: Arial, Helvetica, sans-serif; -webkit-text-size-adjust: none;}

    .fl-l{float: left;}

    .fl-r{float: right;}

    #dialog{

      position: absolute;

      top: 200px;

      left: 400px;

      width: 400px;

      height: 200px;

      background-color: #eaf6db;

      border: 1px solid lightslategray;

    }

    .dialog-title{

      height: 40px;

      line-height: 40px;

      background-color: #3a3333;

      cursor: move;

    }

    .login, .close{

      display: inline-block;

      margin: 0 15px;

    }

  </style>

</head>

<body>

  <div id="dialog">

    <div id="dialog-title" class="dialog-title">

      <span class="fl-l login">登录</span>

      <span class="fl-r close">X</span>

    </div>

  </div>

  <script>

    // 获取DOM元素

    var dialogTitle = document.getElementById('dialog-title')

    var dialog = document.getElementById('dialog')

    // 初始化鼠标默认位置

    var disX = 0, disY = 0

    // 添加鼠标按下事件

    dialogTitle.onmousedown = function(e) {

      var e = e || event

      // 计算鼠标距离弹出框内的位置

      disX = e.clientX - dialog.offsetLeft          // 鼠标相对于浏览器窗口左上角的横向距离 - 弹出框距离页面左上角的横向偏移距离

      disY = e.clientY - dialog.offsetTop           // 鼠标相对于浏览器窗口左上角的纵向距离 - 弹出框距离页面左上角的纵向偏移距离

      // 点击弹出框后拖动鼠标，移动弹出框

      document.onmousemove = function(e) {

        var e = e || event

        // 弹出框dialog距离窗口左上角的水平和纵向距离

        var currentDialogDisX = e.clientX - disX

        var currentDialogDisY = e.clientY - disY

        if(currentDialogDisX < 0) { // 弹出框紧贴窗口左边的情况

          currentDialogDisX = 0

        } else if(currentDialogDisX > document.documentElement.clientWidth - dialog.offsetWidth) { // 弹出框紧贴窗口右边的情况

          currentDialogDisX = document.documentElement.clientWidth - dialog.offsetWidth

        }

        if(currentDialogDisY < 0) { // 弹出框紧贴窗口上边的情况

          currentDialogDisY = 0

        } else if(currentDialogDisY > document.documentElement.clientHeight - dialog.offsetHeight) { // 弹出框紧贴窗口下边的情况

          currentDialogDisY = document.documentElement.clientHeight - dialog.offsetHeight

        }

        // 当鼠标移动时改变弹出框的位置

        dialog.style.left = currentDialogDisX + 'px'

        dialog.style.top = currentDialogDisY + 'px'

      }

      // 当点击鼠标拖动弹出框，抬起鼠标时

      document.onmouseup = function() {

        // 清除弹出框的移动事件及本身

        document.onmousemove = null

        document.onmouseup = null

      }

      // 阻止默认事件，如果不加这个阻止默认事件，在 firefox 下会有一个获取焦点的光标一直在闪动，在3.0及以下会出现拖动出现重影的情况

      return false

    }

  </script>

</body>

</html>

JavaScript实现登录窗口的拖拽的更多相关文章

  1. 第一百三十七节，JavaScript，封装库---修缮拖拽

    JavaScript,封装库---修缮拖拽 修缮拖拽 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:有参设置拖拽点区块,只有弹窗的这个拖拽点区块才能拖拽,无参整个弹窗可以拖 ...

  2. Javascript 事件对象进阶（二）拖拽的应用 - 登录框的拖拽

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. JavaScript实现最简单的拖拽效果

    一.一些无关痛痒的唠叨 拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义.例如: ①浏览器标签顺序的拖拽切换 现在基本上所有的选项卡式的浏览器都有顺序拖拽切换 ...

  4. WPF.UIShell UIFramework之自定义窗口的深度技术 - 模态闪动(Blink)、窗口四边拖拽支持（WmNCHitTest）、自定义最大化位置和大小（WmGetMinMaxInfo）

    无论是在工作和学习中使用WPF时,我们通常都会接触到CustomControl,今天我们就CustomWindow之后的一些边角技术进行探讨和剖析. 窗口(对话框)模态闪动(Blink) 自定义窗口的 ...

  5. 原生JS实现弹出窗口的拖拽

    上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思 ...

  6. Qt-网易云音乐界面实现-1 窗口隐藏拖拽移动，自定义标题栏

    最近也换了公司,也换了新的工作,工资也象征性的涨了一点点,但是最近心里还是慌慌,不知道为什么,没有那种踏实感,感觉自己随时可以被抛弃的感觉.感觉自己在荒废时间,也感觉自己在浪费生命. 为了让自己在被抛 ...

  7. JavaScript实现网页元素的拖拽效果

    以下的页面中放了两个div,能够通过鼠标拖拽这两个元素到任何位置. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2ZydWVk/font/5a6 ...

  8. electron关于无边框窗口无法拖拽移动以及点击事件失效的问题

    为了使窗口无边框,使得在某些时候让项目看起来更美观,所以在创建窗口的时候通过设置 frame 属性的值为 false 来创建无边框窗口.但是无边框窗口会产生无法移动的问题,对于这个问题我们可以在渲染进 ...

  9. javascript事件类型之界面拖拽交互

    一.在线DEMO 界面拖拽交互

随机推荐

  1. SpringMVC+GSON 对象序列化--日期格式的处理

    Gson异常强大因此使用它代替了Jackson作为SpringMVC消息转换器. 在自己的项目中,发现对象在序列化后,日期格式出现了问题. 先看问题 在员工表中有一列是生日,字段类型为Date,也就是 ...

  2. Flask入门之SQLAlchemy配置与数据库连接

    1. 安装SQLAlchemy pip install flask-sqlalchemy 2. 导入和配置 from flask_sqlalchemy import SQLAlchemy basedi ...

  3. 基于elk 实现nginx日志收集与数据分析。

    一.背景 前端web服务器为nginx,采用filebeat + logstash + elasticsearch + granfa 进行数据采集与展示,对客户端ip进行地域统计,监控服务器响应时间等 ...

  4. Mysql访问权限问题：Access denied for user 'root'@'XXX' (using password: YES)

    System.Data.Entity.Core.ProviderIncompatibleException: An error occurred accessing the database. Thi ...

  5. python_code list_1

    >>> def is_not_empty(s): return s and len(s.strip()) > 0 >>> filter(is_not_empt ...

  6. 第一章：Netty介绍

    1. Netty介绍  Netty是一款异步的事件驱动的网络应用程序框架,支持快速地开发可维护的高性能的面向协议的服务器和客户端,Netty是基于NIO实现的,所以整个Netty都是异步操作,网络应用 ...

  7. 代码方式设置WordPress内所有URL链接都在新标签页打开

    本文由荒原之梦原创,原文链接:http://zhaokaifeng.com/?p=699 前言: WordPress默认情况下几乎所有URL链接都是在同一个标签页打开.这样的话,读者点击一个链接就会离 ...

  8. python 零基础学习之路 02-python入门

    不知不觉学习python已经两个月了,从一开始不知道如何对print的格式化,到现在可以手撸orm,这期间真的是 一个神奇的过程.为了巩固自己的基础知识,为后面的拓展埋下更好的伏笔,此文当以导师的博客 ...

  9. 你不知道的JavaScript--Item23 定时器的合理使用

    1.定时器概述 window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval.其中前者可以使一段代码在指定时间后运行:而后者则可 ...

  10. eclipseIDE for javaee developers 开发环境搭建详解图文

    使用eclipse真的有年头了,相信java程序员没有不知道它的,最近在给团队中新来的应届生做指导,专门讲解了一下Eclipse开发环境的搭建过程,一是帮助他们尽快的熟悉IDE的使用,二也是保证团队开 ...