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: ...
随机推荐
- spring roo反向工程
1.创建spring roo工程 2.在数据库中创建数据库feedback_schema,再创建几张表 3.创建连接数据库 persistence setup --provider HIBER ...
- MySql 数据库系列问题
0. 我的MYSQL学习心得(四) 数据类型(系列文章) 1.MySql数据库学习--存储过程(1) 0.[转]MySQL存储过程调试工具-dbForge Studio for MySQL ①.存储过 ...
- php 生成8位数唯一的激活码
/** *生成激活码 */ function showGenerationActivationCode(){ #渠道类型id $channel_id=$_POST['channel']; #根据渠道i ...
- ubuntu下搭建的lamp环境新建站点
这几天刚装了一个ubuntu 16.04桌面版,总之来来回回几遍才基本把环境搭建好,本来用apt-get搭建,结果不知道什么原因16.04版不支持装php5 ,提示源放弃了php5版本,不得不使用ph ...
- ASP.NET动态网站制作（23）-- ADO.NET（2）
前言:这节课老师请高级班的E老师过来代课,还是接着老师讲的内容继续深入,修改了上节课老师写的部分代码. 内容: 1.数据库本质就是一个软件,这个软件帮助我们把数据有序地存储起来,当我们需要数据的时候帮 ...
- Swift开发教程--怎样设置状态栏的文字颜色
第一步:在Info.plist中设置UIViewControllerBasedStatusBarAppearance 为NO 第二步:在viewDidLoad中加一句 UIApplication.sh ...
- ios开发：如何加载大量图片 相册示例
本文转载至 http://www.cnblogs.com/xiongqiangcs/archive/2013/06/13/3134486.html 1. Create a NSOperationQ ...
- nginx学习之web服务器（四）
1. 定义一个虚拟服务器 http { server { # Server configuration } } 可以在http {}块里面添加多个server {}块,每一个server {}块代表一 ...
- debian dhcp配置
1 将/etc/network/interfaces中设置成dhcp auto eth0iface eth0 inet dhcp 2 重启网络服务 /etc/init.d/networking res ...
- What Every Computer Scientist Should Know About Floating-Point Arithmetic
http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html