使用 JS 實(shí)現(xiàn)拖拽拉伸一個(gè) div 的寬度和高度
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
使用 JS 實(shí)現(xiàn)了一個(gè)可拉伸的 1. 鼠標(biāo)在瀏覽器中的坐標(biāo)基本概念
2. 鼠標(biāo)按住拖動(dòng)改變寬度原理
改變高度同理。 3. 代碼實(shí)現(xiàn)HTML： <div id="container1" class="resizable"></div> Javascript： 混用了瀏覽器原生 API 與 jQuery，因?yàn)?jQuery 的鏈?zhǔn)秸{(diào)用太好用了。
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) { // 點(diǎn)擊位置與元素右邊框的距離，不變值 x = el.offsetWidth - evt.offsetX // 在支持 setCapture 捕捉焦點(diǎn), 設(shè)置事件 el.setCapture ? ( el.setCapture(), el.onmousemove = function (ev) { mouseMove(ev || event) }, el.onmouseup = mouseUp ) : ($(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp))
// 阻止默認(rèn)事件 evt.preventDefault();}) // 鼠標(biāo)移動(dòng)事件 function mouseMove(evt) { els.width = evt.offsetX + x + 'px';// 如果鼠標(biāo)移出元素或屏幕外 if (evt.offsetX <= 0 || evt.offsetX >= document.body.clientWidth + 2) {mouseUp()} } // 釋放焦點(diǎn)，移除事件 function mouseUp() { el.releaseCapture ? ( el.releaseCapture(), el.onmousemove = el.onmouseup = null ) : ($(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)) } }4. 不用 js 可以實(shí)現(xiàn) div 拉伸嗎？可以，兩個(gè) css 屬性解決： .resizable { overflow: auto; resize: both; } 該文章在 2023/5/23 15:17:07 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
