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: ...
随机推荐
- 4Sum_leetCode
Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = tar ...
- 微服务网关哪家强？一文看懂Zuul, Nginx, Spring Cloud, Linkerd性能差异
导语:API Gateway是实现微服务重要的组件之一.面对诸多的开源API Gateway,如何进行选择也是架构师需要关注的焦点.本文作者对几个较大的开源API Gateway进行了压力测试,对 ...
- 3s 简介
"3S"技术是英文遥感技术(Remote Sensing RS).地理信息系统(Geographical information System GIS).全球定位系统(Global ...
- wireshark:Couldn't run /usr/bin/dumpcap in child process: Permission denied
When start wireshark, I met an error like: 引用 Couldn't run /usr/bin/dumpcap in child process: Permis ...
- 转载 iOS全局检测网络变化的实时状态
昨天浏览了cocoaChina,发现了一遍文章是优化Reachablity框架的出来的检测网络类,大家都知道这个Reachablity框架是用来检测网络变化的!但是也是有一点bug,事实上,基于此 ...
- hdu 4902 Nice boat（线段树区间改动，输出终于序列）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4902 Problem Description There is an old country and ...
- python 上传文件下载图片
python 2.7 poster-0.8.1 requests-2.7.0 #coding:utf-8import urllibimport urllib2import sysimport time ...
- Java 重写 equals 与 hashCode 的注意事项
为什么重写 equals 的时候必须重写 hashCode 大家可能从很多教程中了解到: SUN官方的文档中规定"如果重定义equals方法,就必须重定义hashCode方法,以便用户可以将 ...
- 页游手游服务器（二）c支持mysql
上一篇说的是liua的net拓展,这一篇说lua的sql拓展,准确说是mysql拓展,这里推荐下postgre,比mysql好用,支持数组,各种好,不过腾讯平台不支持,所以你的公司要和腾讯合作,掂量下 ...
- Android Message handling (based on KK4.4)
一.几个关键概念 1.MessageQueue:是一种数据结构,见名知义,就是一个消息队列.存放消息的地方.每个线程最多仅仅能够拥有一个MessageQueue数据结构. 创建一个线程的时候,并不会自 ...