js可拖动改变div大小,可拖动改变div位置

最新推荐文章于 2024-02-22 16:06:16 发布
最新推荐文章于 2024-02-22 16:06:16 发布
阅读量795 收藏 2
点赞数
分类专栏： 实用小技能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rongyi2233/article/details/116013281
版权

效果如图所示

核心代码

拖动改变方块位置

$(".resizeBox").on({
	'mousedown':function(e){
		var pageX=e.pageX;
		var pageY=e.pageY;
		$(".resizeBox").on('mousemove',function(e){
			var newPageX=e.pageX;
			var newPageY=e.pageY;
			var moveX=newPageX-pageX;
			var moveY=newPageY-pageY;
			var oldLeft=parseFloat($(".resizeBox").css('left'));
			var oldTop=parseFloat($(".resizeBox").css('top'));
			var currentLeft=oldLeft+moveX;
			var currentTop=oldTop+moveY;
			if(currentLeft<0){
				currentLeft=0;
			}else if(currentLeft>$("#wrap").width()-$(".resizeBox").width()-2){
				currentLeft=$("#wrap").width()-$(".resizeBox").width()-2;
			};
			if(currentTop<0){
				currentTop=0;
			}else if(currentTop>$("#wrap").height()-$(".resizeBox").height()-2){
				currentTop=$("#wrap").height()-$(".resizeBox").height()-2;
			};
			$(".resizeBox").css({
				left:currentLeft+'px',
				top:currentTop+'px'
			})
			pageX=newPageX
			pageY=newPageY
		})
	}
});

其中，wrap是外层容器，resizeBox是可拖动的方块。

拖动周围八个方块，改变内容区域大小

$(".dragBlock").on({
	'mousedown':function(e){
		var _this=this;
		var pageX=e.pageX;
		var pageY=e.pageY;
		$('#wrap').on('mousemove',function(e){
			var newPageX=e.pageX;
			var newPageY=e.pageY;
			var moveX=newPageX-pageX;
			var moveY=newPageY-pageY;
			var oldLeft=parseFloat($(".resizeBox").css('left'));
			var oldTop=parseFloat($(".resizeBox").css('top'));
			var currentLeft=oldLeft;
			var currentTop=oldTop;
			switch (true){
				case $(_this).hasClass('upDragBlock'):
				$(".resizeBox").height()-moveY>=40&&(currentTop=oldTop+moveY)
				$(".resizeBox").height($(".resizeBox").height()-moveY)
				break;
				case $(_this).hasClass('downDragBlock'):
				$(".resizeBox").height($(".resizeBox").height()+moveY)
				break;
				case $(_this).hasClass('leftDragBlock'):
				$(".resizeBox").width()-moveX>=100&&(currentLeft=oldLeft+moveX)
				$(".resizeBox").width($(".resizeBox").width()-moveX)
				break;
				case $(_this).hasClass('rightDragBlock'):
				$(".resizeBox").width($(".resizeBox").width()+moveX)
				break;
				
				case $(_this).hasClass('leftUpDragBlock'):
				$(".resizeBox").height()-moveY>=40&&(currentTop=oldTop+moveY)
				$(".resizeBox").width()-moveX>=100&&(currentLeft=oldLeft+moveX)
				
				$(".resizeBox").width($(".resizeBox").width()-moveX)
				$(".resizeBox").height($(".resizeBox").height()-moveY)
				break;
				case $(_this).hasClass('leftDownDragBlock'):
				$(".resizeBox").width()-moveX>=100&&(currentLeft=oldLeft+moveX)
				$(".resizeBox").width($(".resizeBox").width()-moveX)
				$(".resizeBox").height($(".resizeBox").height()+moveY)
				break;
				case $(_this).hasClass('rightUpDragBlock'):
				$(".resizeBox").height()-moveY>=40&&(currentTop=oldTop+moveY)
				$(".resizeBox").width($(".resizeBox").width()+moveX)
				$(".resizeBox").height($(".resizeBox").height()-moveY)
				break;
				case $(_this).hasClass('rightDownDragBlock'):
				$(".resizeBox").width($(".resizeBox").width()+moveX)
				$(".resizeBox").height($(".resizeBox").height()+moveY)
				break;
				default:
					break;
			}
			if(currentLeft<0){
				currentLeft=0;
				moveX=currentLeft-oldLeft
			}else if(currentLeft>$("#wrap").width()-$(".resizeBox").width()-2){
				currentLeft=$("#wrap").width()-$(".resizeBox").width()-2;
				moveX=currentLeft-oldLeft
			};
			if(currentTop<0){
				currentTop=0;
				moveY=currentTop-oldTop;
			}else if(currentTop>$("#wrap").height()-$(".resizeBox").height()-2){
				currentTop=$("#wrap").height()-$(".resizeBox").height()-2;
				moveY=currentTop-oldTop;
			};
			
			$(".resizeBox").css({
				left:currentLeft+'px',
				top:currentTop+'px'
			})
			pageX=newPageX
			pageY=newPageY
		})
		return false;
	}
});

dragBlock就是周围的八个小方块。

对了，拖动完成后，还需要及时清理掉事件，否则会出现甩不掉的情况～

$(document).on('mouseup',function(){
	$(".resizeBox").off('mousemove');
	$("#wrap").off('mousemove');
	
})

然后功能基本就完成了～

完整代码

html

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		#wrap{
			width: 600px;
			height: 400px;
			margin: 0 auto;
			border: 1px solid #ccc;
			position: relative;
			/* background: url(123.jpg) no-repeat center/100% 100%; */
		}
		.resizeBox{
			width: 100px;
			height: 100px;
			min-width: 100px;
			min-height: 40px;
			position: absolute;
			left: 0px;
			top: 0px;
			border: 1px dashed #ccc;
			cursor: move;
			user-select: none;
		}
		.resizeContent{
			width: 100%;
			height: 100%;
		}
		.dragBlock{
			width: 6px;
			height: 6px;
			position: absolute;
			left: 0;
			top: 0;
			border:1px solid #000;
			background: #fff;
			cursor: e-resize;
		}
		.dragBlock.upDragBlock{
			left: 50%;
			margin-left: -2.5px;
			margin-top:-3px;
			cursor: n-resize;
		}
		.dragBlock.downDragBlock{
			left: 50%;
			top: 100%;
			margin-left: -2.5px;
			margin-top:-2px;
			cursor: s-resize;
		}
		.dragBlock.leftDragBlock{
			top: 50%;
			margin-left: -3px;
			margin-top:-2.5px;
			cursor: w-resize;
		}
		.dragBlock.rightDragBlock{
			left: 100%;
			top: 50%;
			margin-left:-2px;
			margin-top:-2.5px;
			cursor: e-resize;
		}
		.dragBlock.leftUpDragBlock{
			margin-left: -3px;
			margin-top:-3px;
			cursor: nw-resize;
		}
		.dragBlock.leftDownDragBlock{
			top: 100%;
			margin-left: -3px;
			margin-top:-2px;
			cursor: sw-resize;
		}
		.dragBlock.rightUpDragBlock{
			left: 100%;
			margin-left: -2px;
			margin-top:-3px;
			cursor: ne-resize;
		}
		.dragBlock.rightDownDragBlock{
			left: 100%;
			top: 100%;
			margin-left: -2px;
			margin-top:-2px;
			cursor: se-resize;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<div class="resizeBox">
			<div class="dragBlockWrap">
				<div class="dragBlock upDragBlock"></div>
				<div class="dragBlock downDragBlock"></div>
				<div class="dragBlock leftDragBlock"></div>
				<div class="dragBlock rightDragBlock"></div>
				<div class="dragBlock leftUpDragBlock"></div>
				<div class="dragBlock leftDownDragBlock"></div>
				<div class="dragBlock rightUpDragBlock"></div>
				<div class="dragBlock rightDownDragBlock"></div>
			</div>
			<div class="resizeContent" title="我是什么？我是一个能自由变化大小的小盒子～">
				我是什么？我是一个能自由变化大小的小盒子～
			</div>
		</div>
	</div>
	
	<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="resize.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

js代码


$(function(){
	function init(){
		addEvent();
	};
	function addEvent(){
		$(".resizeBox").on({
			'mousedown':function(e){
				var pageX=e.pageX;
				var pageY=e.pageY;
				$(".resizeBox").on('mousemove',function(e){
					var newPageX=e.pageX;
					var newPageY=e.pageY;
					var moveX=newPageX-pageX;
					var moveY=newPageY-pageY;
					var oldLeft=parseFloat($(".resizeBox").css('left'));
					var oldTop=parseFloat($(".resizeBox").css('top'));
					var currentLeft=oldLeft+moveX;
					var currentTop=oldTop+moveY;
					if(currentLeft<0){
						currentLeft=0;
					}else if(currentLeft>$("#wrap").width()-$(".resizeBox").width()-2){
						currentLeft=$("#wrap").width()-$(".resizeBox").width()-2;
					};
					if(currentTop<0){
						currentTop=0;
					}else if(currentTop>$("#wrap").height()-$(".resizeBox").height()-2){
						currentTop=$("#wrap").height()-$(".resizeBox").height()-2;
					};
					$(".resizeBox").css({
						left:currentLeft+'px',
						top:currentTop+'px'
					})
					pageX=newPageX
					pageY=newPageY
				})
			}
		});
		
		$(".dragBlock").on({
			'mousedown':function(e){
				var _this=this;
				var pageX=e.pageX;
				var pageY=e.pageY;
				$('#wrap').on('mousemove',function(e){
					var newPageX=e.pageX;
					var newPageY=e.pageY;
					var moveX=newPageX-pageX;
					var moveY=newPageY-pageY;
					var oldLeft=parseFloat($(".resizeBox").css('left'));
					var oldTop=parseFloat($(".resizeBox").css('top'));
					var currentLeft=oldLeft;
					var currentTop=oldTop;
					switch (true){
						case $(_this).hasClass('upDragBlock'):
						$(".resizeBox").height()-moveY>=40&&(currentTop=oldTop+moveY)
						$(".resizeBox").height($(".resizeBox").height()-moveY)
						break;
						case $(_this).hasClass('downDragBlock'):
						$(".resizeBox").height($(".resizeBox").height()+moveY)
						break;
						case $(_this).hasClass('leftDragBlock'):
						$(".resizeBox").width()-moveX>=100&&(currentLeft=oldLeft+moveX)
						$(".resizeBox").width($(".resizeBox").width()-moveX)
						break;
						case $(_this).hasClass('rightDragBlock'):
						$(".resizeBox").width($(".resizeBox").width()+moveX)
						break;
						
						case $(_this).hasClass('leftUpDragBlock'):
						$(".resizeBox").height()-moveY>=40&&(currentTop=oldTop+moveY)
						$(".resizeBox").width()-moveX>=100&&(currentLeft=oldLeft+moveX)
						
						$(".resizeBox").width($(".resizeBox").width()-moveX)
						$(".resizeBox").height($(".resizeBox").height()-moveY)
						break;
						case $(_this).hasClass('leftDownDragBlock'):
						$(".resizeBox").width()-moveX>=100&&(currentLeft=oldLeft+moveX)
						$(".resizeBox").width($(".resizeBox").width()-moveX)
						$(".resizeBox").height($(".resizeBox").height()+moveY)
						break;
						case $(_this).hasClass('rightUpDragBlock'):
						$(".resizeBox").height()-moveY>=40&&(currentTop=oldTop+moveY)
						$(".resizeBox").width($(".resizeBox").width()+moveX)
						$(".resizeBox").height($(".resizeBox").height()-moveY)
						break;
						case $(_this).hasClass('rightDownDragBlock'):
						$(".resizeBox").width($(".resizeBox").width()+moveX)
						$(".resizeBox").height($(".resizeBox").height()+moveY)
						break;
						default:
							break;
					}
					if(currentLeft<0){
						currentLeft=0;
						moveX=currentLeft-oldLeft
					}else if(currentLeft>$("#wrap").width()-$(".resizeBox").width()-2){
						currentLeft=$("#wrap").width()-$(".resizeBox").width()-2;
						moveX=currentLeft-oldLeft
					};
					if(currentTop<0){
						currentTop=0;
						moveY=currentTop-oldTop;
					}else if(currentTop>$("#wrap").height()-$(".resizeBox").height()-2){
						currentTop=$("#wrap").height()-$(".resizeBox").height()-2;
						moveY=currentTop-oldTop;
					};
					
					$(".resizeBox").css({
						left:currentLeft+'px',
						top:currentTop+'px'
					})
					pageX=newPageX
					pageY=newPageY
				})
				return false;
			}
		});
		$(document).on('mouseup',function(){
			$(".resizeBox").off('mousemove');
			$("#wrap").off('mousemove');
			
		})
	};
	
	
	
	
	init();
})

因为公司项目采用的是jquery，因此···简单粗暴一把梭～

rongyi2233
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery拖动改变div大小
10-19
主要为大家详细介绍了jquery拖动改变div大小的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js通过八个点 拖动改变div大小的实现方法
10-26
本篇文章主要是对js通过八个点 拖动改变div大小的实现方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
js实现鼠标拖拽改变div大小的同时另一个div宽度也变化
最新发布
Mr_yangx的博客
02-22 843
【代码】js实现鼠标拖拽改变div大小的同时另一个div宽度也变化。
可拖动div边框改变大小的方法
11-21
可拖动div边框改变大小的方法,jquery拖拽改变div大小效果，。。。。。。。。。。。。。。。。。。。。。。。。。
vue实现div可拖动位置也可改变盒子大小的原理
10-14
主要介绍了vue实现div可拖动位置也可改变盒子大小，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
可拖动可改变大小div的实现代码
09-05
可拖动可改变大小div的实现代码，非常不错的应用，大家可以参考下。
js拖动、拖拽div大小,完美实现版
12-16
js拖动 拖拽div大小，内部随意文件操作。完美实现版
【工作记录】基于CSS+JS可拖拽改变大小、可吸附到边界的DIV
泽济天下的专栏
06-29 845
本文基于css+js实现了可拖拽改变大小且可吸附到边界的div的效果。 仅作为记录。
javascript 拖拽调整div大小
Mervyn的博客
07-29 813
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> div { height: 200px; position: absolute; top: 0px; } .right { right: 0
JavaScript 鼠标拖拽div 改变其大小
acoolgiser的博客
12-06 4276
转自： http://www.cnblogs.com/yushang/archive/2013/03/19/2968782.html 想让div实现拖拽改变大小功能，类似于soso地图（即现在的腾讯地图）的看街景时地图可以拖拽等功能 分析一下，实现这个功能需要：鼠标按下，鼠标移动和鼠标抬起几个功能方能实现，那么找到相应的js事件：mousedown、mousemove、mouseup 找...
JS实现拖动div改变大小
OnePiece
06-13 5885
.upBtn,.downBtn,.upLeftBtn,.upRightBtn,.downLeftBtn,.downRightBtn,.centerLeftBtn,.centerRightBtn { position:absolute; background:#CC0000; width:9px; height:9px; z-index:5; } .upBtn { top:-4px;
dragresize 可让用户调整页面DIV的大小和位置
04-11
dragresize 可让用户调整页面DIV的大小和位置 dragresize 可让用户调整页面DIV的大小和位置
JS可拖动，可改变大小resize div
07-26
NULL 博文链接：https://yangqianyu222.iteye.com/blog/665834
js实现的八点拖动修改div大小的代码
10-29
八点改变div大小的实现代码，代码相对来说并不多，需要的朋友可以参考下。
js拖动div
白茶的博客
04-12 402
接着定义一个变量isClick判断鼠标是否按下，再定义两个变量记录鼠标按下的一瞬间的offsetX和offsetY，因为鼠标在拖动过程中相对于div中的位置不会改变。
js实现拖动div
jingkai0714的博客
10-24 157
比如托上面一小部分 整体都跟着走 下面的是要导出的内容 fndown 依赖 fnMove函数 export function fndown(event, main) { event = event || window.event; var disX = event.clientX - main.offsetLeft, disY = event.clientY - main.offsetTop; document.onmousemove = function (event) ...
基于vue的用js实现鼠标拖拽改变div宽高
你离优秀差多少
03-31 2763
一、vue页面引入css和公共组件 <template> <div class="all"> <!-- 左右两行拖动 --> <div class="drag-main"> <h2>两列的左右拖动改变div大小</h2> <div id="twoBox" class="drag-two-box"> <div id="twoleft" class="drag-two-le.
div 拖动 改变位置
12-20
实现div拖动的关键是监听鼠标事件，并根据鼠标的位置来改变div元素的位置。当用户按下鼠标时，记录下鼠标的初始位置和div元素的初始位置，并持续监测鼠标的移动。当鼠标移动时，计算鼠标位置的变化，并将div元素的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值