使用 JS 實現拖拽拉伸一個 div 的寬度和高度
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
使用 JS 實現了一個可拉伸的 1. 鼠標在瀏覽器中的坐標基本概念
2. 鼠標按住拖動改變寬度原理
改變高度同理。 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 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
