花店做网单的网站,企业电子商务网站优化方案,只做山寨的网站,河北seo关键词排名优化这种拖拽布局功能其实在电脑操作系统或者桌面应用里面是经常使用的基础功能#xff0c;只是有时候在进行web开发的时候#xff0c;对这个功能需求量不够明显#xff0c;但却是很好用#xff0c;也很实用。能够让用户自己拖拽布局#xff0c;方便查看某个区域更多内容…这种拖拽布局功能其实在电脑操作系统或者桌面应用里面是经常使用的基础功能只是有时候在进行web开发的时候对这个功能需求量不够明显但却是很好用也很实用。能够让用户自己拖拽布局方便查看某个区域更多内容这一点足够吸引人的。
这里用原生实现这个特殊的拖拽布局功能可以作为参考和学习使用。话不多说先看看实现的静态效果和动态效果。
静态效果 动态效果 为了查看更佳效果需要把源码在浏览器上运行起来。另一个值得关心的事项案例中左右盒子是可以完全拖拽关闭的也就是宽度为0px。实际应用中可能不需要这种效果没关系可以限制左右盒子的最小宽度判断小于最小宽度就不再进行缩小即可放大限制 也是类似的。
实现原理
想象一下拖拽布局一般都需要两个div盒子同时需要一个可以拖拽的classresize盒子以下简称resize它们都是块元素。然后加上HTML标签和css的基础左右布局样式大致轮廓就出来了。
到这里还没有实现拖拽resize布局逻辑接着往下看。
拖拽resize原理分析
当用户把鼠标移动到resize盒子上面此时出现可以左右拖拽的标识这个标识可以用css的cursor: w-resize来实现。
如果用户按下鼠标左键可以监听鼠标按下事件获得鼠标按下的startX evt.clientX也能获得resize相对于父元素的左偏移值offsetLeft。
resizeBar.onmousedown(evt) { var startX e.clientX; resizeBar.left resizeBar.offsetLeft;} 如果用户按住鼠标左键开始向左或者向右拖拽需要精确计算用户拖拽的实际距离也是鼠标移动的实际距离。计算方式resize的左偏移值offsetLeft鼠标移动实际距离 鼠标按下距离 实际移动距离movelen。 document.onmousemove function (e) { var moveLen resizeBar.left (e.clientX - startX); }
那么resize的左边距离移动实际距离就是这样获得的。
document.onmousemove function (e) { var moveLen resizeBar.left (e.clientX - startX); resizeBar.style.left moveLen px;}
左边|右边盒子宽度就可以得到了。
document.onmousemove function (e) { var moveLen resizeBar.left (e.clientX - startX); resizeBar.style.left moveLen px; leftBox.style.width moveLen px; rightBox.style.width boxWidth - resizeWidth - moveLen px;}
到这里拖拽核心逻辑就结束了为了更好的理解拖拽过程于是就有了下方不怎么好看的抽象图画的不好多多理解。 源码贴上
HTML
bodydiv classbox div classleft overflow p左边盒子/p /div div classresize/div div classright overflow p右边盒子/p /div/div/body CSS
style.box { width: 100%; height: 100vh; display: flex;}.left { background: lightblue;}.resize { width: 10px; height: 100%; background-color: #399aef; cursor: w-resize;}.right { background: rgba(0, 0, 0, 0.4);}p { padding: 20px; text-align: center; font-size: 25px; font-weight: 600;}[class*overflow] { width: 49%; height: 100%; overflow: hidden;}.userselect { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}/style JavaScript
scriptfunction dragResize() { var resizeBar document.querySelector(.resize); var leftBox document.querySelector(.left); var box document.querySelector(.box); var rightBox document.querySelector(.right); var resizeWidth resizeBar.offsetWidth; var boxWidth box.offsetWidth; resizeBar.onmousedown function (e) { var startX e.clientX; resizeBar.left resizeBar.offsetLeft;// 鼠标拖动事件 document.onmousemove function (e) { var moveLen resizeBar.left (e.clientX - startX); resizeBar.style.left moveLen px; leftBox.style.width moveLen px; rightBox.style.width boxWidth - resizeWidth - moveLen px; e.target.style.cursor w-resize // 拖拽过程中禁止选中文本 leftBox.classList.add(userselect) rightBox.classList.add(userselect) };// 鼠标松开事件 document.onmouseup function (evt) { document.onmousemove null; document.onmouseup null; // 清空cursor leftBox.style.cursor default rightBox.style.cursor default leftBox.classList.remove(userselect) rightBox.classList.remove(userselect) }; };}dragResize()
