<!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. Java线程中断的本质深入理解

    Java的中断是一种协作机制.也就是说调用线程对象的interrupt方法并不一定就中断了正在运行的线程,它只是要求线程自己在合适的时机中断自己. 一.Java中断的现象 首先,看看Thread类里的 ...

  2. Node.js 框架对比之 Express VS Koa

    背景 上图是一个典型的采用 Node.js 开发 web 应用的前后端结构,下面介绍一下 Node 服务层在其中的作用以及使用 Node.js 的一些优劣. Node 服务层作用: 请求代理 传统做法 ...

  3. [转]微信小程序，开发大起底

    本文转自:http://blog.csdn.net/baiyuzhong2012/article/details/54378497 作者简介:张智超,北京微函工坊开发工程师,CSDN微信开发知识库特邀 ...

  4. java实现截取6个汉字字母数字

    项目中使用到需要截取6个字(12个字母或数字),解决方法如下: /** * * @方法名称:getWordCount * @内容摘要: <截取输入字符串 大于6个后显示...> * @pa ...

  5. CheckBox 样式

    .cb td {             width: 100px;         } .cb label {             display: inline-block;          ...

  6. 2、Dubbo源码解析--服务发布原理（Netty服务暴露）

    一.服务发布 - 原理: 首先看Dubbo日志,截取重要部分: 1)暴露本地服务 Export dubbo service com.alibaba.dubbo.demo.DemoService to ...

  7. javascript:中文等字符转成unicode

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

  8. 10th week task -2 Object 的起源

    Objective-C与C++.Java等面向对象语言类似,不过很多方面有所差别.若是用过另一种面向对象语言,那么就能理解Objective-C所用的许多范式与模版了.然而语法上也许会显得陌生,因为该 ...

  9. Vue基础知识之vue-resource和axios

    Vue基础知识之vue-resource和axios  原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...

  10. sharepoint2007就地升级2010系列（一）2007概览

    大家可能熟悉了sharepoint2010,熟悉了sharepoint2013,做了N多个项目,但是有没有做过从sharepoint2007升级或者迁移到sharepoint2010的项目呢?我们做实 ...