使用 JS 实现拖拽拉伸一个 div 的宽度和高度

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2023年5月23日 15:13 本文热度 1010

使用 JS 实现了一个可拉伸的 div，按住右边框，拖动鼠标可改变 div 的宽度。

1. 鼠标在浏览器中的坐标基本概念

2. 鼠标按住拖动改变宽度原理

鼠标按下时算出鼠标 x 坐标与元素右边框的距离，在鼠标移动时不变：element.offsetWidth - event.offsetX
元素宽 = 鼠标距离元素左边框距离event.offsetX + 1中算出的值

改变高度同理。

3. 代码实现

HTML：

<div id="container1" class="resizable"></div>

Javascript：

混用了浏览器原生 API 与 jQuery，因为 jQuery 的链式调用太好用了。

bindResize();
function bindResize() 
{
	const el = document.getElementById('container1');
	let els = el.style, x = y = 0;
	el.addEventListener('mousemove', function(evt) {
	if (el.offsetWidth - evt.offsetX <= 10) {
			els.cursor = 'e-resize';
		} else {
			els.cursor = 'auto';
	}})			
	el.addEventListener('mousedown', function(evt) {
		// 点击位置与元素右边框的距离，不变值
		x = el.offsetWidth - evt.offsetX

		// 在支持 setCapture 捕捉焦点, 设置事件
		el.setCapture ? (
			el.setCapture(), 
			el.onmousemove = function (ev) { mouseMove(ev || event) },
			el.onmouseup = mouseUp
		) : ($(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp))				
		// 阻止默认事件
		evt.preventDefault();	})

	// 鼠标移动事件
	function mouseMove(evt) {
		els.width = evt.offsetX + x + 'px';				
		// 如果鼠标移出元素或屏幕外
		if (evt.offsetX <= 0 || evt.offsetX >= document.body.clientWidth + 2) {mouseUp()}
	}

	// 释放焦点，移除事件
	function mouseUp() {		el.releaseCapture ? (
			el.releaseCapture(), el.onmousemove = el.onmouseup = null
		) : ($(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp))
	}
}

4. 不用 js 可以实现 div 拉伸吗？

可以，两个 css 属性解决：

.resizable 
{
  overflow: auto;  resize: both;
}

该文章在 2023/5/23 15:17:07 编辑过

关键字查询

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。