关于移动div的具体实现（js）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动框练习</title>
<style type = "text/css">
#big{width: 300px;height: 200px;position: absolute;top: 200px;left: 300px;background: #ccc;}
h1{width: 200px;height: 50px;line-height: 50px;text-align: center;background: orange;margin: 0 auto; cursor: move;}
</style>
</head>
<body>
<div id="big">
<h1 class="titl"></h1>
</div>
<script type="text/javascript">
//通过父元素获取到指定想要获取的元素。
function getClass(clsName,parent){
var oParent = parent?document.getElementById(parent):document;
var oH1 = oParent.getElementsByClassName(clsName)[0];
return oH1;
}
window.onload = drag;
//给h1添加按住的事件。
function drag(){
var h1Node = getClass("titl","big");
h1Node.onmousedown = fnDown;
}
//通过函数来获取指针的位置。
function fnDown(event) {
event = event || window.event;
var oDiv = document.getElementById("big"),
//光标按下时光标和面板之间的距离。
disX = event.clientX-oDiv.offsetLeft;
disY = event.clientY-oDiv.offsetTop;
document.onmousemove = function(event) {
event = event || window.event;
fnMove(event,disX,disY);
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
function fnMove(e,posX,posY) {
var oDiv = document.getElementById("big"),
l = e.clientX-posX,
t = e.clientY-posY,
winW = document.documentElement.clientWidth || document.body.clientWidth,
winH = document.documentElement.clientHeight || document.body.clientHeight,
maxW = winW-oDiv.offsetWidth,
maxH = winH-oDiv.offsetHeight;
if (l<0) {
l=10;
} else if(l>maxW){
l=maxW;
}
if (t<0) {
t=10;
} else if(t>maxH){
t=maxH;
}
oDiv.style.left = l+"px";
oDiv.style.top = t+"px";
}
</script>
</body>
</html>
关于移动div的具体实现（js）的更多相关文章
- 动态添加div及对应的js、css文件
动态添加div及对应的js.css文件 在近期的项目开发中需要在首页中添加很多面板型的div,直接加载代码显得很繁琐,于是利用js封装一个动态添加div及其对应css文件和js文件的方法供大家参考使用 ...
- making a resizable div effect in vanilla js
making a resizable div effect in vanilla js scroll image compare <!DOCTYPE html> <html lang ...
- js文件需要jsp页面中的div时，此js文件必须在div之后才能获得值，否则获取不到
js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到 2.图2的内容为directionkey.js的内容
- 页面的div中有滚动条，js实现刷新页面后回到记录时滚动条的位置
当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条:每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行.如下: ...
- jquery load加载页面内ajax返回的div不能响应页面js的问题的解决方案
1. 前言 由于项目需要,需要load一个页面并保持ajax返回的div能响应其页面内的JS的click事件.这个不是 解决用jquery load加载页面到div时,不执行页面js的问题 这类问题, ...
- 页面DIV弹出层 JS原生脚本
<script type="text/javascript"> /* * 弹出DIV层 */ function showDiv() { ...
- js 实现div模块的截图并下载功能（可制作长图）
当需要实现html页面部分模块截图并具有保存图片功能时,前台直接生成截图并下载会方便的多.多的不说,直接看代码首先我们需要引入2个js文件: <script type="text/ja ...
- JaveWeb 公司项目（7）----- 通过JS动态生成DIV
Web网页项目的数据表格功能已经大体完成,下面是另一个主要功能,在线视频的显示 目前我做的项目是渔政监控方面,在之前C#的版本中已经实现了摄像头的在线监控,用的海康封装好的SDK,目前需要做的工作是在 ...
- js改变div高度
用bootsrap响应式布局的时候,遇到个很恶心的问题:左边栏很短很难看!! 于是,想用js来自动改变左边的高度,没成功!!原来是设置的时候,没加单位,坑爹了. 参考:http://blog.sina ...
- js循环复制一个div
<html> <head> <title>Test of cloneNode Method</title> <script type=" ...
随机推荐
- 机器学习-review-1 线性回归
发现隔一段时间,忘记了好多知识点,这里认为重要的知识点记录下来,作为笔记,方便以后回顾. From “李航- 统计学习方法” 统计学习方法的三要素: 模型,策略, 算法 对于线性回归 -------- ...
- dd usb 启动盘制作 成功版本
在linux系统中,使用dd命令制作启动盘成功.方法是在终端中输入命令: dd if=/root/opensuse.iso of=/dev/sdb bs=4M 说明: 1.o ...
- dnspod-sr内网轻量级DNS首选方案 - 运维生存时间
dnspod-sr内网轻量级DNS首选方案 - 运维生存时间 undefined
- 缺少HTML Doctype造成的样式问题
很简单的一个登陆界面: 代码: <html> <head> <style type="text/css"> form span { displa ...
- 在JSP页面中调用另一个JSP页面中的变量
在jsp学习中,经常需要在一个jsp页面中调用另一个jsp页面中的变量,下面就这几天的学习,总结一下. jsp页面之间的变量调用有多种方法: 1.通过jsp的内置对象—request对象获取参数: ( ...
- hashCode与equals详解
在工作中写业务类通常都会重写hashCode与equals方法,而这两个方法的区别与用途也常常被问道.平时也只是大概知道这二者的用途,今天闲下来,查阅资料加上自己的理 解,总结记录下. hashCod ...
- ctrl+z的JAVA实现，借助了命令模式（command pattern）
前些天学习<<JAVA与模式>>,到命令模式时,随带给了一个CTRL+Z案例的实现,想来学习编程这么久,CTRL+Z还没有认真实现过. 因此,借助JAVA与模式里面的源代码,自 ...
- BTrace: DTrace for Java
BTrace: DTrace for Java… ish DTrace first peered into Java in early 2005 thanks to an early prototyp ...
- 用NodeJs实现优先级队列PQueue
优先级队列(PriorityQueue)是个很有用的数据结构,很多编程语言都有实现.NodeJs是一个比较新潮的服务器语言,貌似还没有提供相关类.这些天有用到优先级队列,因为时间很充足,闲来无事,就自 ...
- Linux下安装并破解StarUML
下载 官网地址: http://starumlreleases-7a0.kxcdn.com/v2.7.0/StarUML-v2.7.0-64-bit.deb CSDN: http://download ...