原生JS拖拽改变元素大小

最新推荐文章于 2025-06-21 13:08:55 发布

寒江独

最新推荐文章于 2025-06-21 13:08:55 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/fandyvon/article/details/88718914

本文介绍如何利用原生JavaScript实现通过拖拽改变元素大小的效果，详细讲解了拖拽原理及实现步骤，包括判断鼠标位置、处理拖拽方向以及动态调整元素尺寸的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生JS使用拖拽改变元素的大小

JS运动，JS动画，JS拖拽。

我们在之前了解过拖拽的原理，其实利用这个原理我们能够实现很多效果。今天就来介绍一下，利用拖拽方法来改变元素的大小。这个效果其实非常常见，比如说我们可以将鼠标放在浏览器的边边上，然后浏览器光标就会变成可以拖拽的样子，我们可以往左或往右拖拽。我们来实现这个效果。原理：先看一张图：

images

鼠标只能放在左右的绿色框中才能拖拽，那么我们分别要做这几件事：

1、利用判断语句判断鼠标是放在左边还是右边的框中。

2、往右拖拽不改变元素的offsetLeft的值，往左拖拽改变了offsetLeft的值。

3、使用判断语句当鼠标在左边拖拽时发生的情况，当在右边拖拽发生的情况。

4、拖拽过程中，改变的值与元素的offsetLeft，元素的宽，鼠标的位置都有关系。

实现过程：

   <script>
window.onload = function() {
	
	var oDiv = document.getElementById('div1');
	
	oDiv.onmousedown = function(ev) {
		
		var ev = ev || event;
		
		var disW = this.offsetWidth;
		var disX = ev.clientX;
		var disL = this.offsetLeft;
		
		var b = '';
		//当鼠标放在距离右边10px的区域可以拖动元素
		if ( disX > disL + disW - 10 ) {
			
			b = 'right';
		}
		if ( disX < disL + 10 ) {
			
			b = 'left';
		}
		
		document.onmousemove = function(ev) {
			
			var ev = ev || event;
			
			switch( b ) {
				
				case 'left':
					oDiv.style.width = disW - ( ev.clientX - disX ) + 'px';
					oDiv.style.left = disL + ( ev.clientX - disX ) + 'px';
					break;
					
				case 'right':
					oDiv.style.width = disW + ( ev.clientX - disX ) + 'px';
					break;
				
			}
			
		}
		
		document.onmouseup = function() {
			document.onmousemove = document.onmouseup = null;
		}
		
		return false;
		
	}
	
}
</script>

  

说明： 1、首先对元素的宽，鼠标的位置，以及元素的offsetLeft值进行变量声明

2、判断鼠标的位置是在左边还是在右边

3、当鼠标在左边拖拽时，改变的是元素的宽度以及元素离文档的距离。因此也就是改变了元素的width和left的值；当鼠标在右边拖拽时，改变的只是元素本身的宽度

4、oDiv.style.width = disW - ( ev.clientX - disX ) + ‘px’;这段代码的意思是：当往左边拖拽时，运动过程中，与文档的距离，鼠标的位置ev.clientX的值是小于onmousedown时的值的，ev.clientX-disX是一个负值。而这个时候元素的宽度是增加的，增加的值是ev.clentX-之前的值。所以这个时候要用元素宽度减去这个负值才是正值。同理，这个时候元素离文档的距离时减少的，因此是相加一个负值

5、当鼠标在右边拖拽时，元素的offsetLeft不变，所以不用操作；元素的宽度是增加的，这个时候ev.clientX的值是大于之前disX的值的，用ev.clientX-disX是一个正值，增加的职业是这个正值，因此用元素宽度直接加上这个正值即可。

在线操作