JavaScript中,让一个div在固定的父div中任意拖动
1、css代码
#big {
border: 1px solid #FF3300;
width: 300px;
height: 300px;
position: relative;
}
#small {
background: #99CC00;
width: 50px;
height: 50px;
position: absolute;
cursor: pointer;
}
2、JavaScript代码
<script language="javascript">
function small_down(e) {
var obig = document.getElementById("big");
var osmall = document.getElementById("small");
var e = e || window.event;
/*用于保存小的div拖拽前的坐标*/
osmall.startX = e.clientX - osmall.offsetLeft;
osmall.startY = e.clientY - osmall.offsetTop;
/*鼠标的移动事件*/
document.onmousemove = function(e) {
var e = e || window.event;
osmall.style.left = e.clientX - osmall.startX + "px";
osmall.style.top = e.clientY - osmall.startY + "px";
/*对于大的DIV四个边界的判断*/
if (e.clientX - osmall.startX <= 0) {
osmall.style.left = 0 + "px";
}
if (e.clientY - osmall.startY <= 0) {
osmall.style.top = 0 + "px";
}
if (e.clientX - osmall.startX >= 250) {
osmall.style.left = 250 + "px";
}
if (e.clientY - osmall.startY >= 250) {
osmall.style.top = 250 + "px";
}
};
/*鼠标的抬起事件,终止拖动*/
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
}
</script>
3、html代码
<body>
<div id="big">
<div id="small" onmousedown="small_down(event)"></div>
</div>
</body>
---恢复内容结束---
JavaScript中,让一个div在固定的父div中任意拖动的更多相关文章
- xHTML+div布局：三个div,两边div宽度固定，中间div宽度自适应
xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应. 和大家分享一个实现方式: 1.html代码 <div class="dyleft"> ...
- 子DIV设置margin-top影响父DIV位置的解决办法
父div如果没有任何东西,子div设置margin-top,父div会下落 <!DOCTYPE html> <html lang="en"> <hea ...
- 利用css如何让嵌套的div层不继承父div层的透明度？
http://zhidao.baidu.com/link?url=cvQhh0Q7_ah0qg9tc-2zP0cjB_PoIiIq6t6RFpp4aZPPNoVJUqyy7TT41TU5pWzRtRY ...
- Umbraco -- 在Visual Studio中新建一个View 如何在Umbraco back office 中显示出来
在使用Umbraco中的过程中,遇到一个问题. 我在项目中(Visual Studio),添加了一个View---Test.cshtml. 然后进入到该Umbraco项目的back office, 在 ...
- CSS: 解决Div float后，父Div无法高度自适应的问题
在用CSS+DIV的布局中,常常会发现,当一个DIV float之后,假设他的高度超过了其父DIV的高度时,其父DIV的高度并不会对应的进行调整.要解决问题(也叫做闭合(清除)浮动),我们有四种办法: ...
- 子div设置margin-top使得父div也跟着向下移动
之前在写网页的时候,发现一个小问题,就是子div设置margin-top的时候,父的div也会跟着向下移动.我用代码和图描述一下问题: <span style="font-size:1 ...
- 子div撑不开父div的几种解决办法：
如何修正DIV float之后导致的外部容器不能撑开的问题 在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样 ...
- 子div撑不开父div
方法一:推荐 设置父div的overflow:hidden; 方法二: 父div结束前增加一个空div style=”clear:both;” .clear { clear:both; } <d ...
- HTML中嵌套的子frame如何访问父页面中的函数？
我解决的办法,在父页面写了个函数,然后在frame页面调用父页面的函数,具体代码如下: 父:function a(){} 子frame:window.parent.a(); 问题迎刃而解 https: ...
随机推荐
- IOS开发中的分享到邮件
本篇和UIWebView的全屏截图,可以一起使用,先对UIWebView进行截图,然后分享到邮箱(当时做还有分享到微信.腾讯微博.新浪微博功能,这三个根据官方资料,比较容易实现,这里就不进行解说了). ...
- mybaits返回插入成功后的自增值
mybaits返回插入成功后的自增值 在项目中,我们经常遇到这样的情况:insert语句成功后,需要自增的id值,这个时候,我们可以通过mybatis的 useGeneratedKeys 来实现,具体 ...
- 并发检测主机ip存活脚本
#!/bin/bash ################### # Check Active Host####### ################### function CheckInput() ...
- 那不是Bug，是新需求
原文作者:Jeff Atwood 自从我干上软件开发这一行.而且使用了Bug跟踪系统.我们在每个项目里都会纠结一个主要的问题:你怎么能把Bug与功能需求区分开来? 当然,假设程序崩溃了,这毫无疑问是B ...
- python入门课程 第一章 课程介绍
1-1 Python入门课程介绍特点: 优雅.明确.简单适合领域: web网站和各种网络服务 系统工具和脚本 作为"胶水"语言把其他语言开发的模块包装起来方 ...
- random随机模块,time时间模块
random /随机模块: 作用: 在某个范围内取到每一个值得概率是相通的. 一.随机小数 random.random() import random print(random.random()) ...
- 毕达哥拉斯三元组（勾股数组）poj1305
本原毕达哥拉斯三元组是由三个正整数x,y,z组成,且gcd(x,y,z)=1,x*x+y*y=z*z 对于所有的本原毕达哥拉斯三元组(a,b,c) (a*a+b*b=c*c,a与b必定奇偶互异,且c为 ...
- 3354 [IOI2005]河流
题目描述 几乎整个Byteland王国都被森林和河流所覆盖.小点的河汇聚到一起,形成了稍大点的河.就这样,所有的河水都汇聚并流进了一条大河,最后这条大河流进了大海.这条大河的入海口处有一个村庄——名叫 ...
- 【BZOJ1226】[SDOI2009]学校食堂Dining 状压DP
[BZOJ1226][SDOI2009]学校食堂Dining Description 小F 的学校在城市的一个偏僻角落,所有学生都只好在学校吃饭.学校有一个食堂,虽然简陋,但食堂大厨总能做出让同学们满 ...
- Apache Maven pom文件
Welcome to Apache Maven Apache Maven is a software project management and comprehension tool. Based ...