<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{margin:0;padding:0;}

        .nav{

            height:30px;

            background: #036663;

            border-bottom:1px solid #369;

            line-height: 30px;

            padding-left:30px;

        }

        .nav a {

            color:#fff;

            text-align: center;

            font-size:14px;

            text-decoration: none;

        }

        .d-box{

            width:400px;

            height:300px;

            border:5px solid #eee;

            box-shadow:2px 2px 2px 2px #666;

            position: absolute;

            top:50%;

            left:50%;

            margin-top: -155px;

            margin-left:-205px;

        }

        .hd{

            width:100%;

            height:25px;

            background-color: #7c9299;

            border-bottom:1px solid #369;

            line-height: 25px;

            color:white;

            cursor: move;

        }

        #box_close{

            float: right;

            cursor: pointer;

        }

    </style>

</head>

<body>

<div class="nav">

    <a href="javascript:;" id="register">注册信息</a>

</div>

<div class="d-box" id="d_box">

    <div class="hd" id="drop">注册信息   (可以拖拽)

            <span id="box_close">【关闭】</span>

    </div>

    <div class="bd"></div>

</div>

</body>

</html>

<script>

    var box = document.getElementById("d_box");

    var drop = document.getElementById("drop");

    startDrop(drop,box);  // 鼠标放到  drop    但是移动 是 box

    function startDrop(current,move) {

        current.onmousedown = function(event) {

            var event = event || window.event;

            var x = event.clientX - move.offsetLeft - 205;   // 记录当前盒子的x 位置

            var y = event.clientY - move.offsetTop - 155;  //  // 记录当前盒子的y位置

            document.onmousemove = function(event) {

                var event = event || window.event;

                move.style.left = event.clientX - x + "px";

                move.style.top = event.clientY - y + "px";

                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

            }

        }

        document.onmouseup = function() {  // 鼠标弹起之后， 鼠标继续移动不应该操作

            document.onmousemove = null;

        }

    }

纯JS拖动案例的更多相关文章

  1. identity4 系列————纯js客户端案例篇[四]

    前言 前面已经解释了两个案例了,通信原理其实已经很清楚了,那么纯js客户端是怎么处理的呢? 正文 直接贴例子哈. https://github.com/IdentityServer/IdentityS ...

  2. 纯JS文本在线HTML编辑器KindEditor

    KindEditor(http://www.kindsoft.net)是一款比较专业,主流,好用的在线HTML编辑器. 它除了可以将文本进行编辑.将Word中的内容复制进来外,本身还可以拖动缩放(右下 ...

  3. 纯JS画点、画线、画圆的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 纯js实现DIV拖拽

    写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...

  5. 纯JS实现俄罗斯方块，打造属于你的游戏帝国

    纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...

  6. F2工作流引擎之-纯JS Web在线可拖拽的流程设计器（八）

          Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...

  7. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  8. 纯js异步无刷新请求(只支持IE)

    纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...

  9. [分享黑科技]纯js突破localstorage存储上线，远程抓取图片，并转码base64保存本地，最终实现整个网站所有静态资源离线到用户手机效果却不依赖浏览器的缓存机制，单页应用最新黑科技

    好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了,项目地址https://github.com/xueduany/localsto ...

随机推荐

  1. 省市区json数据

    window.LocalList = [ { region:{ name:'北京市', code:'11', state:[ { name:'北京', code:'01', city:[ {name: ...

  2. CTSC/APIO2018 游记

    狗牌滚粗选手,此博客证明我去过...... CTSC 消失的源代码与消失的分数...... 我也不知道发生了什么....... APIO 旁边两位小哥太强了,心态完全炸裂,最后也滚粗了...... 回 ...

  3. SQL Exists 的用法 转载

    比如在Northwind数据库中     有一个查询为 SELECT c.CustomerId, CompanyName FROM Customers c WHERE EXISTS( SELECT O ...

  4. 基于RBAC模式的权限管理系统设计概要

    很多人都知道以角色为基础的权限管理设计(RBAC),但是大部分人似懂非懂,不知道完整的权限管理系统都包括哪些内容.  在此以权限管理的使用场景来说明一下完整的权限管理内容.     一是鉴权管理,即权 ...

  5. 网页设计，Access入门 2010，语文

    Access入门 2010(select查询) order by(按升序排列)?+desc(按降序排列) group by(进行分组,下一行只能用having) sum(数值总数)?+as?(新字段的 ...

  6. 解决flashfxp连接虚拟机报错 530 permission denied

    菜鸟使用flashfxp遇到连接报错. [21:36:19] [R] 530 Permission denied.[21:36:19] [R] 连接失败 (连接已被客户端关闭) 搜索后发现,是因为li ...

  7. java常用API之Calendar类

    Calendar是日历类,该类将所有可能用到的时间信息封装为静态成员变量,方便获取. Calendar为抽象类,由于语言敏感性,Calendar类在创建对象时并非直接创建,而是通过静态方法创建,将语言 ...

  8. mysql五补充：SQL逻辑查询语句执行顺序（待完善）

    一.SELECT语句关键字的定义顺序(语法顺序) SELECT DISTINCT <select_list> FROM <left_table> <join_type&g ...

  9. IT人的格言警句

    程序员困境:我们通过编码谋生,但环境却正在摧毁我们这种谋生的能力. 在技术日新月异的IT行业,“专家”这个词其实是个危险信号,意味着你的知识距离老化不远了.IT工程师应该经常更换工作领域,了解多个领域 ...

  10. ARM 中可用性集使用的注意事项

    Azure 目前有两种部署模型:经典部署模型 (ASM) 和资源管理器 (ARM).如果您之前使用过 ASM 模式下的可用性集,那么很可能在使用 ARM 模式下的可用性集时,会遇到一些问题或者疑惑.这 ...