web实现drag拖拽布局
moboyou 2025-06-18 18:38 21 浏览
这种拖拽布局功能其实在电脑操作系统或者桌面应用里面是经常使用的基础功能，只是有时候在进行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实现居中的七种方法
- 下一篇：css3新手入门(1)基础选择器
相关推荐
- linux下C++ socket网络编程——即时通信系统(含源码)
-
一：项目内容本项目使用C++实现一个具备服务器端和客户端即时通信且具有私聊功能的聊天室。目的是学习C++网络开发的基本概念，同时也可以熟悉下Linux下的C++程序编译和简单MakeFile编写二：需...
- Workerman的使用（workerman教程）
-
Workerman是什么？Workerman是一款纯PHP开发的开源高性能的PHPsocket服务框架。Workerman不是重复造轮子，它不是一个MVC框架，而是一个更底层更通用的socket服...
- 百万人在线的直播间实时聊天消息分发技术实践
-
本文由融云技术团队原创分享，原题“聊天室海量消息分发之消息丢弃策略”，内容有修订。1、引言随着直播类应用的普及，尤其直播带货概念的风靡，大用户量的直播间场景已然常态化。大用户量直播间中的实时互动是非常...
- 省钱兄JAVA 直播源码开发（省钱快报源码）
-
在现代社会，直播已经成为一种流行的社交和商业形式。越来越多的人通过直播平台展示自己的才艺、分享生活、进行教学，甚至进行产品销售。随着直播行业的发展，许多人希望能够参与到这一领域中，尤其是开发自己的直播...
- 编程革命彻底爆发，OpenAI最强智能体上线ChatGPT
-
OpenAI最强AI编程智能体真的来了！Codex震撼上线，由o3优化版codex-1加持，多任务并行，半小时干完数天软件工程任务。从今天起，AI编程正式开启新时代！刚刚，GregBrockman...
- Springboot下的WebSocket开发（springboot websock）
-
今天遇到一个需求，需要对接第三方扫码跳转。一种方案是前端页面轮询后端服务，但是这种空轮询会虚耗资源，实时性比较差而且也不优雅。所以决定使用另一种方案，websocket。以前就知道websocket，...
- epoll聊天室的实现（epoll使用详解(精髓)）
-
1.服务端a.支持多个用户接入，实现聊天室的基本功能b.使用epoll机制实现并发，增加效率2.客户端a.支持用户输入聊天消息b.显示其他用户输入的信息c.使用fork创建两个进程子进程有...
- 自建娱乐聊天室—一起听歌吧!属于自己的交友聊天房
-
前言该项目算是老项目了，但最近粉丝群里的友友都让我写一下，那就写一下吧。项目类似于现在各大直播平台的聊天室，但又不像。它更加的自由开放，没有平台的礼物以及各种限制，如果你有来自五湖四海的朋友，想一起聊...
- 定时任务框架选型Quartz/Xxl-Job（定时任务调度框架）
-
以前公司平台中集成了定时任务功能，但平台内部实现比较简单，使用方式有些受限，比如说无法跟踪定时任务执行状态，无法自动解决集群状态下的任务争抢问题，因此考虑升级一下任务实现方式，搜集一番后，Quartz...
- 【推荐】一款开源免费的 ChatGPT 聊天管理系统，支持PC、H5等多端
-
如果您对源码&技术感兴趣，请点赞+收藏+转发+关注，大家的支持是我分享最大的动力！！！项目介绍GPTCMS是一款开源且免费（基于GPL-3.0协议开源）的ChatGPT聊天管理系统，它基于先进的GPT...
- 现在页面实时聊天都使用Websocket技术实现吗?
-
是的，现在实现页面实时聊天主要使用Websocket，在此之前，还有其它的一些技术，比如：AJAX轮询、FlashXMLSocket等。其中Ajax轮询就是定时向服务器发起请求，例如1秒钟请求一...
- 一对一源码开发，九大方面完善基础架构
-
以往的直播大多数都是一对多进行直播社交，弊端在于不能满足到每个用户的需求，会降低软件的体验感。伴随着用户需求量的增加，一对一直播源码开始出现。一个完整的一对一直播流程即主播发起直播→观看进入房间观看→...
- 揭秘PHP8.4的新特性，帮助您提高开发效率
-
PHP8.4作为一次重大版本更新，引入了多项提升开发效率和代码性能的新特性，以下是核心功能的总结：一、属性钩子（PropertyHooks）-功能描述：允许通过语法直接为类的属性定义get...
- 【验证码逆向专栏】某验三代、四代一键通过模式逆向分析
-
声明本文章中所有内容仅供学习交流，抓包内容、敏感网址、数据接口均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关，若有侵权，请联系我立即删除！本文章未经许可禁止转载，禁止任...
- 如何申请SourceForge免费PHP空间（国内免费php空间申请）
-
SF.net，即Sourceforge.net，是国外一个开源软件分享及管理平台，也是全球最大开源软件开发平台和仓库。Sourceforge.net为广大的开发者提供了软件发布平台，同时又提供了个人免...
- 一周热门
- 最近发表
-
- linux下C++ socket网络编程——即时通信系统(含源码)
- Workerman的使用（workerman教程）
- 百万人在线的直播间实时聊天消息分发技术实践
- 省钱兄JAVA 直播源码开发（省钱快报源码）
- 编程革命彻底爆发，OpenAI最强智能体上线ChatGPT
- Springboot下的WebSocket开发（springboot websock）
- epoll聊天室的实现（epoll使用详解(精髓)）
- 自建娱乐聊天室—一起听歌吧!属于自己的交友聊天房
- 定时任务框架选型Quartz/Xxl-Job（定时任务调度框架）
- 【推荐】一款开源免费的 ChatGPT 聊天管理系统，支持PC、H5等多端
- 标签列表
-
- 外键约束 oracle (36)
- oracle的row number (32)
- 唯一索引 oracle (34)
- oracle in 表变量 (28)
- oracle导出dmp导出 (28)
- oracle两个表 (20)
- oracle 数据库 字符集 (20)
- matlab化简多项式 (20)
- 多线程的创建方式 (29)
- 多线程 python (30)
- java多线程并发处理 (32)
- 宏程序代码一览表 (35)
- c++需要学多久 (25)
- css class选择器用法 (25)
- css样式引入 (30)
- css教程文字移动 (33)
- php简单源码 (36)
- php个人中心源码 (25)
- php小说爬取源码 (23)
- 云电脑app源码 (22)
- html画折线图 (24)
- docker好玩的应用 (28)
- linux有没有pe工具 (34)
- mysql数据库源码 (21)
- php开源万能表单系统源码 (21)