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

ゝ一世哀愁。 2022-09-21 11:51 101阅读 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 条评论，101人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关可拖动的DIV

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

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

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

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

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

相关如何在一个div中使其子div居中的5种方式

![70][] [demo地址-codepen][demo_-codepen] 第一种基于绝对定位，要求有固定的宽高 main{ p

川长思鸟来/ 2022年05月24日 13:18/ 0 赞/ 133 阅读

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9f

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

相关父div中多个子div并排显示---弹性布局

第一步：我们先定义一个父div和4个子div，并给他们定义相应的class类名 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpd

客官°小女子只卖身不卖艺/ 2022年01月16日 08:35/ 0 赞/ 412 阅读

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

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

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