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

最新推荐文章于 2024-02-22 16:06:16 发布

rongyi2233

最新推荐文章于 2024-02-22 16:06:16 发布

阅读量831

点赞数

分类专栏：实用小技能

本文链接：https://blog.csdn.net/rongyi2233/article/details/116013281

版权

实用小技能专栏收录该内容

11 篇文章 0 订阅

订阅专栏

效果如图所示

核心代码

拖动改变方块位置

$(".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
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js可拖动改变div大小,可拖动改变div位置

核心代码拖动改变方块位置$(".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.
复制链接

扫一扫