使用 JS 實現拖拽拉伸一個 div 的寬度

使用 JS 實現了一個可拉伸的 div，按住右邊框，拖動鼠標可改變 div 的寬度。

1. 鼠標在瀏覽器中的坐標基本概念

2. 鼠標按住拖動改變寬度原理

1. 鼠標按下時算出鼠標 x 坐標與元素右邊框的距離，在鼠標移動時不變：element.offsetWidth - event.offsetX
2. 元素寬 = 鼠標距離元素左邊框距離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;
}

---

2022-03-02

參考

了解JS的clientX、pageX、screenX等方法來獲取鼠標坐標