<!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: 40%;

            left: 40%;

            background-color: white;

            /* 不让文字被选中 */

            -webkit-user-select:none;

            -moz-user-select:none;

            -ms-user-select:none;

            user-select:none;

        }

        .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>

<script src="common.js"></script>

<script>

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

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

  drop.onmousedown = function (e) {

    // 兼容性处理

    e = e || window.event;

    // 当鼠标按下的时候，求鼠标在盒子中的位置

    // 鼠标在盒子中的位置 = 鼠标在页面上的位置 - 盒子的位置

    var x = getPage(e).pageX - box.offsetLeft;

    var y = getPage(e).pageY - box.offsetTop;

    // 鼠标在文档中移动

    document.onmousemove = function (e) {

      e = e || window.event;

      // 当鼠标在页面上移动的时候。求盒子的坐标

      // 盒子的坐标 = 鼠标当前在页面中的位置 - 鼠标在盒子中的位置

      var boxX = getPage(e).pageX - x;

      var boxY = getPage(e).pageY - y;

      box.style.left = boxX + 'px';

      box.style.top = boxY + 'px';

    }

  }

  // 当鼠标弹起的时候，移除鼠标移动事件

  document.onmouseup = function () {

    document.onmousemove = null;

  }

  // 点击关闭按钮，隐藏盒子

  var box_close = document.getElementById('box_close');

  box_close.onclick = function () {

    box.style.display = 'none';

  }

</script>

</body>

</html>

common中的代码

function my$(id) {

  return document.getElementById(id);

}

// 处理浏览器兼容性

// 获取第一个子元素

function getFirstElementChild(element) {

    var node, nodes = element.childNodes, i = 0;

    while (node = nodes[i++]) {

        if (node.nodeType === 1) {

            return node;

        }

    }

    return null;

}

// 处理浏览器兼容性

// 获取下一个兄弟元素

 function getNextElementSibling(element) {

    var el = element;

    while (el = el.nextSibling) {

      if (el.nodeType === 1) {

          return el;

      }

    }

    return null;

  }

// 处理innerText和textContent的兼容性问题

// 设置标签之间的内容

function setInnerText(element, content) {

  // 判断当前浏览器是否支持 innerText

  if (typeof element.innerText === 'string') {

    element.innerText = content;

  } else {

    element.textContent = content;

  }

}

// 处理注册事件的兼容性问题

// eventName, 不带on，  click  mouseover  mouseout

function addEventListener(element, eventName, fn) {

  // 判断当前浏览器是否支持addEventListener 方法

  if (element.addEventListener) {

    element.addEventListener(eventName, fn);  // 第三个参数 默认是false

  } else if (element.attachEvent) {

    element.attachEvent('on' + eventName, fn);

  } else {

    // 相当于 element.onclick = fn;

    element['on' + eventName] = fn;

  }

}

// 处理移除事件的兼容性处理

function removeEventListener(element, eventName, fn) {

  if (element.removeEventListener) {

    element.removeEventListener(eventName, fn);

  } else if (element.detachEvent) {

    element.detachEvent('on' + eventName, fn);

  } else {

    element['on' + eventName] = null;

  }

}

// 获取页面滚动距离的浏览器兼容性问题

// 获取页面滚动出去的距离

function getScroll() {

  var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;

  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

  return {

    scrollLeft: scrollLeft,

    scrollTop: scrollTop

  }

}

// 获取鼠标在页面的位置，处理浏览器兼容性

function getPage(e) {

  var pageX = e.pageX || e.clientX + getScroll().scrollLeft;

  var pageY = e.pageY || e.clientY + getScroll().scrollTop;

  return {

    pageX: pageX,

    pageY: pageY

  }

}

//格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式

function formatDate(date) {

  // 判断参数date是否是日期对象

  // instanceof  instance 实例(对象)   of 的

  // console.log(date instanceof Date);

  if (!(date instanceof Date)) {

    console.error('date不是日期对象')

    return;

  }

  var year = date.getFullYear(),

      month = date.getMonth() + 1,

      day = date.getDate(),

      hour = date.getHours(),

      minute = date.getMinutes(),

      second = date.getSeconds();

  month = month < 10 ? '0' + month : month;

  day = day < 10 ? '0' + day : day;

  hour = hour < 10 ? '0' + hour : hour;

  minute = minute < 10 ? '0' + minute : minute;

  second = second < 10 ? '0' + second : second;

  return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;

}

// 获取两个日期的时间差

function getInterval(start, end) {

  // 两个日期对象，相差的毫秒数

  var interval = end - start;

  // 求 相差的天数/小时数/分钟数/秒数

  var day, hour, minute, second;

  // 两个日期对象，相差的秒数

  // interval = interval / 1000;

  interval /= 1000;

  day = Math.round(interval / 60 / 60 / 24);

  hour = Math.round(interval / 60 / 60 % 24);

  minute = Math.round(interval / 60 % 60);

  second = Math.round(interval % 60);

  return {

    day: day,

    hour: hour,

    minute: minute,

    second: second

  }

}

bom案例1-div拖拽的更多相关文章

  1. 案例：简易的Div拖拽

    案例:简易的Div拖拽 鼠标移入Div区域后,按下鼠标左键,可以拖动Div移动;松开鼠标左键,Div拖动停止.同时要求Div不能拖出屏幕显示区域外. 拖拽原理:距离不变.三个事件(onmousedow ...

  2. 实现Div拖拽

    直观的理解div拖拽:当鼠标对着可拖拽部分按住后并拖动,div会跟着鼠标一起运动,并且其运动空间限制在浏览器内部,当放开鼠标时,则div停止运动. 实现div拖拽需要三个重要的事件: (1)onmou ...

  3. html之div拖拽，html5拖拽

    html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp

  4. 运用DIV拖拽实现resize和碰撞检测

    运用DIV拖拽实现resize和碰撞检测 Div由拖拽改变大小 演示demo 当我们运用html元素"textarea"写一个文本输入框时,浏览器会自动生成以下样式 用鼠标拖动右下 ...

  5. 纯js实现DIV拖拽

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

  6. html --- javascript --- div --- 拖拽方块

    当鼠标拖拽的很快时,光标会走出方块,所以把事件注册在了方块的父节点上, 如有疑问请参照:http://blog.csdn.net/a9529lty/article/details/2708171 使用 ...

  7. 前端笔记之JavaScript（十一）event&BOM&鼠标/盒子位置&拖拽/滚轮

    一.事件对象event 1.1 preventdefault()和returnValue阻止默认事件 通知浏览器不要执行与事件关联的默认动作. preventdefault()  支持Chrome等高 ...

  8. 原生js实现div拖拽+按下鼠标计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ...

  9. 原生js实现div拖拽

    十分简单的效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  10. div拖拽缩放jquery插件编写——带8个控制点

    项目中需要对div进行拖拽缩放,需要有控制面板8个控制点的那种,原以为这么常见的效果应该能搜索到很多相关插件,然而可以完成拖拽的实繁,却找不到我想要的,还是自己动手丰衣足食吧 效果预览(只支持pc端) ...

随机推荐

  1. Certified Adversarial Robustness via Randomized Smoothing

    目录 概 主要内容 定理1 代码 Cohen J., Rosenfeld E., Kolter J. Certified Adversarial Robustness via Randomized S ...

  2. [c++]对vector<T>容器求交集，并集，去重

    #include "iostream" #include "vector" #include "algorithm" //sort函数.交并 ...

  3. nssm常用命令（在Windows系统下安装服务的工具）

    nssm install servername //创建servername服务 nssm start servername //启动服务 nssm stop servername //暂停服务 ns ...

  4. 《MySQL数据操作与查询》- 综合项目 - 航空售票系统

    Mysql & SqlServer综合项目需求 1.系统整体功能 系统需支持以下功能: 维护客户信息.航班信息和票务信息 支持客户按多种条件组合查询航班信息和票务信息 支持客户根据票务信息订购 ...

  5. .net core中的Options重新加载机制

    Options是.net core提出的一种辅助配置机制,即选项. 目前,我们可以使用的Options有五种(源码): IOptionsFactory<>:Options的创建工厂(Sin ...

  6. 使用 Docker 构建和运行自己的镜像

    步骤 首先,从 GitHub 中克隆示例项目: git clone https://github.com/dockersamples/node-bulletin-board cd node-bulle ...

  7. CF786C Till I Collapse

    题目分析 首先,对于这道题,可以用贪心以一个\(O(n)\)的复杂度求解一个\(k\)的值 暴力是\(O(n^2)\)的复杂度,当然过不了. 我们手推一下样例,会发现,答案满足单调性,于是,果断想到二 ...

  8. ES6嵌套对象的解构

    有下列对象需要解构: const obj:any[] = [ { id: 33, username: "mengsongna", realName: "孟松娜" ...

  9. Python3.7 比较两个Excel文件指定列的值的异同，并将核对结果写入Excel中（含升级版本）

    背景: 最近工作中需要核对客户的历史数据, 接近400个产品,需要核对的列有15列,行数有8000+行 肉眼核对简直要吐血 心想着反正在学python呢 人生苦短 何不用python写个脚本 帮助我核 ...

  10. 初识python 之 爬虫：BeautifulSoup 的 find、find_all、select 方法

    from bs4 import BeautifulSoup lxml 以lxml形式解析html,例:BeautifulSoup(html,'lxml') #  注:html5lib 容错率最高fin ...