<!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. JS常用的设计模式(6)——桥接模式

    桥接模式的作用在于将实现部分和抽象部分分离开来, 以便两者可以独立的变化.在实现api的时候, 桥接模式特别有用.比如最开始的singleton的例子. var singleton = functio ...

  2. [转]Show parameter & Table Not exists

    本文转自:http://www.cnblogs.com/fangwenyu/archive/2011/01/06/1926774.html 问题描述 在尝试通过show parameter来查看一个参 ...

  3. RocketMQ3.2.6安装部署及调用

    RocketMQ3.2.6安装部署及调用 1.RocketMQ部署架构 所有IP都是127.0.0.1,其中NameServer一个,Broker一个,Producer一个,Consumer一个 2. ...

  4. git把dev部分提交过的内容合并到master

    git 把dev部分提交过的内容合并到master $ git reflog a6de5cc HEAD@{}: checkout: moving from wf_dev to master 303aa ...

  5. 多线程TCP的socket通信

    应用多线程来实现服务器与多客户端之间的通信. 基本步骤: 1.服务器端创建ServerSocket,循环调用accept()等待客户端的连接 2.客户端创建一个socket并请求和服务器端的连接 3. ...

  6. HDU 1003 最大连续和

    http://www.acmerblog.com/hdu-1003-Max-Sum-1258.html 这里难点只有求起始位置,把握状态变化就行.一般这种子序列问题,都可以用dp简化 #include ...

  7. 抽象工厂模式&简单工厂模式

    抽象工厂模式 优点: 如IFactory factory=new AccessFactory(),在一个应用中只需要初始化一次,这就使得改变应用的时候变得非常容易:其次它让具体的创建实例过程与客户端分 ...

  8. mpvue自定义化后台富文本样式

    最近公司写小程序开始换框架了,之前用wepy,现在用mpvue. mpvue是基于vue的写法来开发微信小程序.虽然不完全和vue一样,但是大致和vue一样,所以基本开发上是上手很快的. 现在项目进程 ...

  9. 从零开始的全栈工程师——JS面向对象（ 原型 this 继承）

    一.生成对象的方式 ①单例模式(字面量定义)var obj = {} ②类的实例 var obj = new Object( ) ③工厂模式 ④构造函数:扮演三种角色 普通函数 普通对象 类 工厂模式 ...

  10. Bootstrap导航栏navbar源码分析

    1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...