bom案例1-div拖拽
<!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拖拽的更多相关文章
- 案例：简易的Div拖拽
案例:简易的Div拖拽 鼠标移入Div区域后,按下鼠标左键,可以拖动Div移动;松开鼠标左键,Div拖动停止.同时要求Div不能拖出屏幕显示区域外. 拖拽原理:距离不变.三个事件(onmousedow ...
- 实现Div拖拽
直观的理解div拖拽:当鼠标对着可拖拽部分按住后并拖动,div会跟着鼠标一起运动,并且其运动空间限制在浏览器内部,当放开鼠标时,则div停止运动. 实现div拖拽需要三个重要的事件: (1)onmou ...
- html之div拖拽，html5拖拽
html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp
- 运用DIV拖拽实现resize和碰撞检测
运用DIV拖拽实现resize和碰撞检测 Div由拖拽改变大小 演示demo 当我们运用html元素"textarea"写一个文本输入框时,浏览器会自动生成以下样式 用鼠标拖动右下 ...
- 纯js实现DIV拖拽
写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...
- html --- javascript --- div --- 拖拽方块
当鼠标拖拽的很快时,光标会走出方块,所以把事件注册在了方块的父节点上, 如有疑问请参照:http://blog.csdn.net/a9529lty/article/details/2708171 使用 ...
- 前端笔记之JavaScript（十一）event&BOM&鼠标/盒子位置&拖拽/滚轮
一.事件对象event 1.1 preventdefault()和returnValue阻止默认事件 通知浏览器不要执行与事件关联的默认动作. preventdefault() 支持Chrome等高 ...
- 原生js实现div拖拽+按下鼠标计时
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ...
- 原生js实现div拖拽
十分简单的效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- div拖拽缩放jquery插件编写——带8个控制点
项目中需要对div进行拖拽缩放,需要有控制面板8个控制点的那种,原以为这么常见的效果应该能搜索到很多相关插件,然而可以完成拖拽的实繁,却找不到我想要的,还是自己动手丰衣足食吧 效果预览(只支持pc端) ...
随机推荐
- IT6516功能兼容芯片|DP转VGA方案|CS5202替代兼容IT6516
台湾联阳T6516是一种高性能的DP显示端口到VGA转换器方案芯片.IT6516结合DisplayPort接收器和三重DAC,通过转换功能支持DisplayPort输入和VGA输出.内置Display ...
- c++—通讯录管理系统
一.运用所学的结构体.地址指针等基础知识,完成通讯录管理系统 二.系统主要有以下6个功能: 1.添加联系人2.显示联系人 3.删除联系人 4.查找联系人5.修改联系人 6.清空联系人 1 #inclu ...
- MySQL数据操作与查询笔记 • 【第7章 连接查询】
全部章节 >>>> 本章目录 7.1 内连接查询 7.1.1 交叉连接(笛卡尔积) 7.1.2 内连接查询概要 7.1.3 内连接案例 7.1.4 自然连接 7.2 多表连 ...
- 第10组 Beta冲刺 (1/5)（组长）
1.1基本情况 ·队名:今晚不睡觉 ·组长博客:https://www.cnblogs.com/cpandbb/p/14012521.html ·作业博客:https://edu.cnblogs.co ...
- scrollTop、scrollHeight与clientHeight
MDN上概念 scrollTop:获取或设置一个元素的内容垂直滚动的像素数. scrollHeight:一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容. clientHeight:元素内部 ...
- XCTF-反序列化中_wakeup()函数
跳过_wakeup()魔法函数__wakeup(): 将在序列化之后立即被调用漏洞原理: 当反序列化字符串中,表示属性个数的值大于其真实值,则跳过__wakeup()执行 对于该题,先可以看到类xct ...
- MCU软件最佳实践——使用printf打印数据
在mcu上开发应用时,使用串口打印调试信息是最常用的调试手段之一.printf是c标准库提供的函数,可以方便输出格式化的信息.但针对不同的mcu芯片,printf函数要能正常工作,需要做一些移植和适配 ...
- 为什么JavaWeb要分层
首先bai让我们坐着时光机回到n年前的web开发.那个时候最早du都是静态的html页面,zhi后来有了数据库,有了所谓dao的动态页面,然后程序猿在编码的时候,会把所有的代码都写在页面上,包括数据库 ...
- 【问题排查过程】vm-backup的snapshots导致磁盘满
使用中发现,vm-storage节点仅仅过了6天,就占用了800GB的硬盘空间.很不正常.下面是排查过程: 1.查看磁盘占用情况: 先登录容器,执行: df -h /dev/vdb 1012.8G 8 ...
- manjora20安装搜狗输入法
先安装好fcitx和yay yay -S fcitx-sogoupinyin sudo pacman -S base-devel 这是因为需要使用外网,需要配置代理. 注意 manjora20输入法一 ...