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: ...
随机推荐
- excel表格系列
MicroSoft Excel表格系列问题 1.excel表格修改默认行高 2.[Excel技巧]Excel实现部分保护技巧
- 利用github Pages和Jekyll搭建blog实践1
你必须要懂一点git和网页开发.安装了git,并且有github账户. github设计了Pages功能,允许用户自定义项目首页 github提供模板,允许站内生成网页,但也允许用户自己编写网页,然后 ...
- c++中如何查看一个类的内存布局
打开VS command prompt,输入下述命令可以看到对象的内存布局. cl a.cpp -d1 reportSingleClassLayout[classname] // reportSin ...
- C语言基础知识【C语言教程】
2017年7月7日23:15:51外边下雨,突然想学习c语言,所以刷一遍基础. 笔记:C 语言教程1.C 语言是一种通用的.面向过程式的计算机程序设计语言.1972 年,为了移植与开发 UNIX 操作 ...
- Lumen Repository（仓储）
在 Laravel 5 中使用 Repository 模式实现业务逻辑和数据访问的分离:http://laravelacademy.org/post/3063.html Eloquent: 集合:ht ...
- images have the “stationarity” property, which implies that features that are useful in one region are also likely to be useful for other regions.
Convolutional networks may include local or global pooling layers[clarification needed], which combi ...
- CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- Tensorflow官方文档中文版——第一章
第一示例: import tensorflow as tf import numpy as np x_data=np.float32(np.random.rand(,))#随机输入 y_data=np ...
- python __nonzero__方法
类的nonzero方法用于将类转换为布尔值.通常在用类进行判断和将类转换成布尔值时调用.比如语句if A: print 'foo'中就会调用A.nonzero()来判断.下面这个程序应该能帮助你理解n ...
- ALV调用的几个函数
转 ALV的调用主要由以下几个标准函数实现,所有函数的输入输出参数必须大写,否则系统会出现异常中止,相关函数如下: 1)REUSE_ALV_FIENDCATALOG_MERGE:根据内表结构返回FI ...