<!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. Oracle服务器重命名

    转载自:http://www.codesec.net/view/120387.html 因工作需要准备了一台服务器专门按照oracle数据库,并且服务器上安装了windows 2008R2操作系统,在 ...

  2. 省市区json数据

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

  3. node会话管理——cookie-parser

    cookie是由服务器发送给客户端(浏览器)的小量信息. 我们知道,平时上网时都是使用无状态的HTTP协议传输出数据,这意味着客户端与服务端在数据传送完成后就会中断连接.这时我们就需要一个一直保持会话 ...

  4. css3总结之居中

    居中在前端布局上很常见,也很常用,也是最基本的技巧.居中效果在方向控制上基本可以分解成水平居中,垂直居中和水平垂直居中. 针对调整的元素不同,具体的处理方式上有些差异.这里我们先不讲绝对定位下的居中, ...

  5. Prime Numbers in a Grid素数网格

    &/@ Shorthand notation for Map If[PrimeQ[#], Framed@Style[#, Orange, Bold, 15], #] & /@ Rang ...

  6. OOM android

    1.[原创]Android 系统稳定性 - OOM(一) 2.[原创]Android 系统稳定性 - OOM(二) 3.Android内存泄露分析(MemoryAnalyzer工具)

  7. CSS3中的变形与动画（二）

    CSS3动画 过渡属性transiton-property 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可 ...

  8. dl +rec

    AutoEncoder http://blog.csdn.net/studyless/article/details/70880829

  9. CCF201712-1 最小差值

    试题编号: 201712-1 试题名称: 最小差值 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给定n个数,请找出其中相差(差的绝对值)最小的两个数,输出它们的差值的绝对值 ...

  10. 数据库系统异常排查之DMV（转)

    来源: http://www.cnblogs.com/fygh/archive/2012/03/12.html 数据库系统异常是DBA经常要面临的情景,一名有一定从业经验的DBA,都会有自己一套故障排 ...