31、JavaScript中,让一个div在固定的父div中任意拖动

ゝ一世哀愁。 2022-09-21 11:51 169阅读 0赞

1、css代码

<style>
    			#big {
    				border: 1px solid #FF3300;
    				width: 300px;
    				height: 300px;
    				position: relative;
    			}
    			
    			#small {
    				background: #99CC00;
    				width: 50px;
    				height: 50px;
    				position: absolute;
    				cursor: pointer;
    			}
    		</style>

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" οnmοusedοwn="small_down(event)"></div>
    		</div>
    	</body>

发表评论取消回复

表情：

评论列表（有 0 条评论，169人围观）

还没有评论，来说两句吧...

相关阅读

相关让一个div居中的3种方式

今天遇到了一个大家都会但是可能会记得不清楚的问题 1.margin .father{ width:400px; heigh

朴灿烈づ我的快乐病毒、/ 2023年06月22日 14:53/ 0 赞/ 15 阅读

相关拖动div元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl

蔚落/ 2023年06月01日 12:38/ 0 赞/ 30 阅读

相关 js设置div在body中可以任意拖动

js代码： function dragFunc() { var Drag = document.getElementById(divId);

以你之姓@/ 2022年12月19日 15:24/ 0 赞/ 179 阅读

相关 JS_让div在body中可以任意拖动

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

绝地灬酷狼/ 2022年12月15日 14:23/ 0 赞/ 140 阅读

相关 31、JavaScript中,让一个div在固定的父div中任意拖动

1、css代码 <style> big { border: 1px solid FF3300; width: 300px

ゝ一世哀愁。/ 2022年09月21日 11:51/ 0 赞/ 170 阅读

相关可拖动的DIV

<!DOCTYPE html> <html> <head> <title>test</title> <script sr

淡淡的烟草味﹌/ 2022年06月14日 02:18/ 0 赞/ 286 阅读

相关 html如何让其中一个div浮在另一个div上面

（1）方法：设置div样式 z-index:auto auto可定义为一个值(整数数字)，越大代表越置前，如可定义为： z-index:999。前

水深无声/ 2022年05月31日 01:16/ 0 赞/ 765 阅读

相关子div在父div中水平垂直居中的问题

总结： div如何在另一个div中水平垂直居中？ 1）利用父绝子相对，子div margin：auto；上下左右都为0

古城微笑少年丶/ 2022年05月09日 11:46/ 0 赞/ 265 阅读

相关没有固定高度的div，在父元素中垂直居中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9f

水深无声/ 2022年04月13日 05:59/ 0 赞/ 271 阅读

相关多个div在一个div中一行水平显示

1.使用 inline-block .an{ display: inline-block; }

小鱼儿/ 2021年09月27日 11:26/ 0 赞/ 411 阅读