<!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. mysql 存储过程（proceduce）查询一个表的结果插入另外一个表

    公司的时间戳存证业务,对发版过程中间数据处理需要用到存储过程.对此做一个简短记录,以免遗忘. DROP procedure record_timestamp_deal ; ##创建存储过程 creat ...

  2. node.js中的模板引擎jade、handlebars、ejs

    使用node.js的Express脚手架生成项目默认是jade模板引擎,jade引擎实在是太难用了,这么难用还敢设为默认的模板引擎,过分了啊!用handlebars模板引擎写还说的过去,但笔者更愿意使 ...

  3. 认识Spring AOP

    Spring AOP AOP是Aspect/'æspekt/ Oriented/ɔːrɪentɪd/ Programming的缩写,意为:面向切面编程. 是什么 通过预编译方式和运行期动态代理实现程序 ...

  4. c#解析json字符串处理（最清晰易懂的方法）

    注:博客迁移到csdn,本文最新地址:https://blog.csdn.net/sajiazaici/article/details/77647625 以下为原文 本文是全网第二简单的方法,因为我女 ...

  5. 有关satement与preparedstatement

    satement 用于写入数据,例子如下: connection conn=DBHelper.getConnection(); Statement stmt=conn.createStatement( ...

  6. Spring Cloud Ribbon负载均衡配置类放在Spring boot主类同级增加Exclude过滤后报Field config in com.cloud.web.controller.RibbonConfiguration required a bean of type 'com.netflix.client.config.IClientConfig' that could not b

    环境: Spring Cloud:Finchley.M8 Spring Boot:2.0.0.RELEASE 目录结构: 可以看到代码第13行的注释,我已经在@ComponentScan注解中添加了E ...

  7. TopcoderSRM679 Div1 250 FiringEmployees(树形dp)

    题意 [题目链接]这怎么发链接啊..... 有一个 \(n\) 个点的树,每个点有点权(点权可能为负) ,求包含点\(1\)的最 大权连通子图(的权值和) . \(n \leqslant 2500\) ...

  8. phpmyadmin杂记

    看着坑爹的教程..我老是报错我也很无奈啊 以下几项必改 $cfg['blowfish_secret'] = ' ';//这里引号内是空格,实际上可以是任意内容, $cfg['Servers'][$i] ...

  9. nodejs进阶(7)—async异步流程控制

    Async介绍 Async是一个流程控制工具包,提供了直接而强大的异步功能.基于Javascript为Node.js设计,同时也可以直接在浏览器中使用. Async提供了大约20个函数,包括常用的 m ...

  10. CSS3媒体查询总结

    1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...