web实现drag拖拽布局
moboyou 2025-06-18 18:38 3 浏览
这种拖拽布局功能其实在电脑操作系统或者桌面应用里面是经常使用的基础功能，只是有时候在进行web开发的时候，对这个功能需求量不够明显，但却是很好用，也很实用。能够让用户自己拖拽布局，方便查看某个区域更多内容，这一点足够吸引人的。
这里用原生实现这个特殊的拖拽布局功能，可以作为参考和学习使用。话不多说，先看看实现的静态效果和动态效果。
静态效果：
动态效果：
为了查看更佳效果，需要把源码在浏览器上运行起来。另一个值得关心的事项：案例中左右盒子是可以完全拖拽关闭的，也就是宽度为0px。实际应用中可能不需要这种效果，没关系，可以限制左右盒子的最小宽度，判断小于最小宽度就不再进行缩小即可，放大限制 也是类似的。
实现原理
想象一下，拖拽布局一般都需要两个div盒子，同时需要一个可以拖拽的class=resize盒子（以下简称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
<body>
<div class="box">
<div class="left overflow">
<p>左边盒子</p>
</div>
<div class="resize"></div>
<div class="right 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
<script>
function 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()
- 上一篇：用CSS实现居中的七种方法
- 已经是最后一篇了
相关推荐
- web实现drag拖拽布局
-
这种拖拽布局功能其实在电脑操作系统或者桌面应用里面是经常使用的基础功能，只是有时候在进行web开发的时候，对这个功能需求量不够明显，但却是很好用，也很实用。能够让用户自己拖拽布局，方便查看某个区域更多...
- 用CSS实现居中的七种方法
-
微信ID：WEB_wysj(点击关注)◎◎◎◎◎◎◎◎◎一┳═┻︻▄（页底留言开放，欢迎来吐槽）●●●在网页上使HTML元素居中看似一件很简单的事情.至少在某些情况下是这样的，但是...
- CSS函数translate、translate3d的使用
-
translate()和translate3d()函数可以实现元素在指定轴的平移的功能。函数使用在CSS转换属性transform的属性值。实现转换的函数类型有：translate()：2D平面实现X...
- Windows 10迎来Alpha版HTML编辑器应用: 支持PC移动双平台
-
2016-05-1609:07:47次阅读次推荐稿源：cnBeta.COM条评论微软已经发布了面向Windows10PC/Mobile双平台的HTML编辑器应用，尽管目前仍处于Alph...
- 在移动端别再用 100vh 了!试试这些全新的 CSS 单位
-
开发者在设计移动端布局时，经常遇到这样的问题：在桌面浏览器上一切正常，但当页面打开到手机上时，精心设计的页面却总会出现奇怪的截断、异常滚动，甚至布局在浏览器工具栏隐藏或出现时发生位移。这类问题的元凶通...
- 分享几个漂亮的宇宙风格的按钮动画效果，让你喜欢上CSS
-
转载说明：原创不易，未经授权，谢绝任何形式的转载俗话说得好，兴趣是最好的老师。本篇文章搜集了几个漂亮的宇宙风格按钮动画效果的代码，希望它们能够激发你对CSS的热爱。作为前端开发者，我们不仅仅是制作...
- 推荐15个最好的HTML5移动模板 (一)
-
当你创造了一个应用程序，现在你想展示给世界，那么你可以创建一个网站或登陆页面。因此，我们可以利用HTML5模板，这样就可以轻松地在互联网上公布。这些模板可以快速的提高您的业务。当你设计一个登陆页面的移...
- Cursor新功能:让rules规则编写，从 “大海捞针” 到 “一键定制”
-
作为一名系统开发者，最近在使用Cursor编辑器时发现了一个堪称"开发者救星"的功能——"/GenerateCursorRules"！这个与Claude3.7火爆...
- 值得使用的CSS库添加图像悬停效果!
-
一个悬停效果简单来说可以定义为在颜色，产生的效果文字的大小或形状或任何其他形式的变化发生，当你把鼠标光标移动到图像。这可以通过CSS编码容易实现。这里我们介绍国外8个CSS库添加图像悬停效果，提高网站...
- web开发之-前端css(6)
-
css除了用来设置样式外，还可以设置各种特效，我们常用到的特效有两种：过渡和动画，过渡需要响应事件更改样式属性来触发，而动画，不需要响应事件就可以执行，下面我们看下，这两种实现的方式；css样式过渡我...
- 旗鱼浏览器电脑版v1.01发布:“超级拖拽”等大量新功能等你体验
-
圣诞节快乐！在这个祥和的日子里，旗鱼浏览器电脑版也迎来了1.01版更新，本次更新增加了大量新功能，比如“超级拖拽”，用户在网页内朝右上方拖拽一个超链接，在任意地方松开鼠标，新网页就自动在现标签页右侧后...
- 你不知道的css小技巧
-
提示：点击上方"蓝色字体"↑可订阅！关于我们51RGB官方微信CSS中的级联(cascade)在同一时间可谓是幸福的，也可以说是痛苦不堪的。通常能工作得非常好，但有问题的时候，也让人们都很激动，甚...
- JavaScript图片或者div拖动拖动函数的实现
-
/**拖动图片封装html格式：<imglay-src="${item.Resourcesurl}"alt="${item.ResourcesName}"...
- 移动端css重置的那些事
-
上次写了篇pc端的css重置样式，需要注意的一些事。好多xd留言，马上开动，说说移动端的css样式重置需要注意的一些事。1、和pc端不同的是，pc需要兼容低版本的浏览器，而移动端这方面的工作就小多了。...
- 用 Cursor 开发 10 +项目后，汇总了40 多条提示词
-
每次跟新手讲解Cursor的使用技巧时，他们总会说："哎呀，这工具好是好，就是不知道该怎么跟它对话..."是的，不少小伙伴都在为这个困扰：手握着强大的AI编程工具，却像拿着一把...
- 一周热门
- 最近发表
- 标签列表
-
- curseforge官网网址 (16)
- 外键约束 oracle (36)
- oracle的row number (32)
- 唯一索引 oracle (34)
- oracle in 表变量 (28)
- oracle导出dmp导出 (28)
- oracle 数据导出导入 (16)
- oracle两个表 (20)
- oracle 数据库 字符集 (20)
- oracle修改端口 (15)
- 左连接 oracle (15)
- oracle安装补丁 (19)
- matlab归一化 (16)
- 共轭梯度法matlab (16)
- matlab化简多项式 (20)
- 多线程的创建方式 (29)
- 多线程 python (30)
- java多线程并发处理 (32)
- 宏程序代码一览表 (35)
- c++需要学多久 (25)
- c语言编程小知识大全 (17)
- css class选择器用法 (25)
- css样式引入 (30)
- html5和css3新特性 (19)
- css教程文字移动 (33)