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: ...
随机推荐
- “-Xmx1024m -Xms1024m -Xmn512m -Xss256k”——Java运行参数
[JAVA学习]“-Xmx1024m -Xms1024m -Xmn512m -Xss256k”——Java运行参数 转载 2016年06月13日 19:33:38 2792 年轻代 年老代概念 htt ...
- View Controller容器
在 iOS 5 之前,view controller 容器是 Apple 的特权.实际上,在 view controller 编程指南中还有一段申明,指出你不应该使用它们.Apple 对 view c ...
- 【Caffe】caffemodel的大小计算(转载)
看到一篇将如何计算caffemodel大小的blog,感觉对理解模型大小很有帮助. 原文地址:http://blog.csdn.net/u014696921/article/details/52413 ...
- 三层登录实例VB.NET版具体解释---理论加实战篇
层,百度百科这样解释,首先-重叠起来的东西:重叠起来的东西中的一部分:层次|表层|大气层.其次-重叠.反复:层峦叠嶂|层出不穷.最后-量词,用于能够分出层次的事物.女孩儿强烈的第六感,三层中的层一定是 ...
- mysql windows安装
http://blog.csdn.net/tossgoon/article/details/44412491 1.从该地址http://dev.mysql.com/downloads/mysql/中选 ...
- ios -富文本和尺寸
/** * 计算文本的宽高 方法 2 * * @param str 需要计算的文本 * @param font 文本显示的字体 * @param maxSize 文本显示的范围 ...
- android 自定义 listView
目录: 1.主布局 ListView <?xml version="1.0" encoding="utf-8"?><RelativeLayou ...
- devexpress gridcontrol如何遍历每一行
List<Medicine> medicinelist = new List<Medicine>(); foreach (GridViewRow row in GridView ...
- nginx学习之简化安装篇（一）
环境:CentOS 6.5 1. 安装依赖环境 [root@localhost ~]# yum install pcre-devel zlib-devel openssl-devel -y 2. 安装 ...
- JavaScript点击事件-一个按钮触发另一个按钮
<input type="button" value="Click" id="C" onclick="Go();" ...