当前位置： 首页 > news >正文

web实现drag拖拽布局

news 2026/4/1 20:08:48

这种拖拽布局功能其实在电脑操作系统或者桌面应用里面是经常使用的基础功能，只是有时候在进行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()

相关文章：

web实现drag拖拽布局

这种拖拽布局功能其实在电脑操作系统或者桌面应用里面是经常使用的基础功能&#xff0c;只是有时候在进行web开发的时候&#xff0c;对这个功能需求量不够明显&#xff0c;但却是很好用&#xff0c;也很实用。能够让用户自己拖拽布局&#xff0c;方便查看某个区域更多内容&…...

编程日记 2024/8/20 5:45:27

Linux网络编程—listen、accept、connect

一、网络四件套 #include <sys/types.h> //头文件&#xff1b;这四个文件一包&#xff0c;基本网络就无问题了&#xff1b; #include <sys/socket.h> #include <netinet/in.h> #include <arpa/inet.h> 二、listen 监听&#xff1a;将套…...

编程日记 2024/8/20 5:44:25

logback.xml自定义标签节点

logback.xml自定义标签节点 问题 <?xml version"1.0" encoding"UTF-8" ?> <configuration scan"true" scanPeriod"60 seconds" debug"false"><appender name"console" class"ch.qos.logb…...

编程日记 2024/8/20 5:41:20

探索DevExpress WinForms：.NET世界中的UI库之星

开篇概述 作为一名资深的技术专家&#xff0c;我对.NET开发和UI库有着深入的了解。今天&#xff0c;我要向您介绍的是DevExpress WinForms —— 一款在.NET开发领域广受欢迎的开源UI库。它以其强大的功能、优雅的设计和卓越的性能&#xff0c;成为了众多开发者的首选。 主体讲解…...

编程日记 2024/8/20 5:40:19

零基础学习Redis(4) -- 常用数据结构介绍

我们之前提到过&#xff0c;redis中key只能是字符串类型&#xff0c;而value有多种类型。 redis中的数据结构有自己独特的实现方式能根据特定的场景进行优化 1. string(字符串) 内部编码&#xff1a; raw&#xff1a;最基本的字符串&#xff0c;类比我们平常使用的Stringin…...

编程日记 2024/8/20 5:39:18

Python实现水果忍者（开源）

一、整体介绍&#xff1a; 1.1 前言&#xff1a; 游戏代码基于Python制作经典游戏案例-水果忍者做出一些改动&#xff0c;优化并增加了一些功能。作为自己Python阶段学习的结束作品&#xff0c;文章最后有源码链接。 1.2 Python主要知识&#xff1a; &#xff08;1&#xf…...

编程日记 2024/8/20 5:37:15

Windows自动化3️⃣WindowsPC拽起时长问题解决方案

问题描述: Windows应用从点击, 到加载完成, 需要一定的时间后台是否已经启动过当前程序?启动后, 前后台应用关闭问题等 我的解决思路: 首先检查进程 , 当前进程是否在运行, 如果进程在运行, 需要先关闭进程 关闭进程后, 开始我们的自动化流程, 去拽起 应用 拽起应用后, 可以先…...

编程日记 2024/8/20 5:31:10

一篇文章入门Java虚拟机（JVM）

JVM全称是Java Virtual Machine&#xff0c;中文译名Java虚拟机。本质上是一个运行在计算机上的程序 一&#xff0c;JVM的功能 功能描述解释和运行对字节码文件中的指令&#xff0c;实时的解释成机器码&#xff0c;让计算机执行内存管理自动为对象、方法等分配内存&#xff1…...

编程日记 2024/8/20 5:30:09

vue3里面的组件实例类型（包括原生的html标签类型）

在 通过 ref&#xff08;null&#xff09;获取组件的时候&#xff0c;我们想要为 组件标注组件类型&#xff0c;可以通过 any 类型来进行标注&#xff0c;但是很明显&#xff0c;这些的代码很不优雅&#xff0c;所以我们可以利用 vue3 里面的 InstanceType 来进行类型标注 这是…...

编程日记 2024/8/20 5:29:07

谷歌正式开放Imagen 3访问权限！OpenAI的GPT-4o连续两周迎来两次更新！｜AI日报

文章推荐 马斯克Grok 2打响反内容限制第一枪&#xff0c;盛大网络狂欢&#xff01;一起来看网友花式整活&#xff01; GPT-4o一天迎来2大劲敌&#xff01;Grok-2发布测试版&#xff01;Gemini Live即刻上线&#xff01; 今日热点 OpenAI发布chatgpt-4o-latest AI模型&#…...

编程日记 2024/8/20 5:28:06

C语言内存操作函数

目录 一. C语言内存操作函数 1. memcpy的使用和模拟实现 2. memmove函数 3. memset函数 4. memcmp函数 一. C语言内存操作函数 随着知识的不断积累&#xff0c;我们所想要实现的目标程序就会更加复杂&#xff0c;今天我们来学习一个新的知识叫做C语言内存操作函数&#x…...

编程日记 2024/8/20 5:27:05

深入探索 PyTorch：torch.nn.Parameter 与 torch.Tensor 的奥秘

标题&#xff1a;深入探索 PyTorch&#xff1a;torch.nn.Parameter 与 torch.Tensor 的奥秘 在深度学习的世界里&#xff0c;PyTorch 以其灵活性和易用性成为了众多研究者和开发者的首选框架。然而&#xff0c;即使是经验丰富的 PyTorch 用户&#xff0c;也可能对 torch.nn.Pa…...

编程日记 2024/8/20 5:25:03

成为Python砖家(1): 在本地查询Python HTML文档

目的 Python3 官方文档位于 https://docs.python.org/3/ &#xff0c; 有时候网络无法连接&#xff0c;或者连接速度慢&#xff0c; 这对于学习 Python 时的反馈造成了负面影响。准备一份本地 Python 文档可以让反馈更加及时。 下面给出 macOS 和 Win11 下的 Python 离线文档…...

编程日记 2024/8/20 5:23:01

深度学习基础—RMSprop算法与Adam 优化算法

1.RMSprop算法 1.1.算法流程 除了动量梯度下降法&#xff0c;RMSprop算法也可以加快梯度下降&#xff0c;这个算法的算法流程如下&#xff1a;深度学习基础—动量梯度下降法http://t.csdnimg.cn/zeGRo 1.2.算法原理 和动量梯度下降不同的是&#xff0c;对dW和db的变成了平方项…...

编程日记 2024/8/20 5:22:00

单片机原理及技术（六）—— 中断系统的工作原理

目录 一、AT89S51中断技术概述 二、AT89S51中断系统结构 2.1 中断请求源 2.2 中断请求标志寄存器 2.2.1 TCON 寄存器 2.2.2 SCON 寄存器 三、中断允许与中断优先级的控制 3.1 中断允许寄存器 IE 3.2 中断优先级寄存器 IP 四、响应中断请求的条件 五、外部中断的触发…...

编程日记 2024/8/20 5:20:58

Angular路由使用

Angular路由是Angular框架中一个非常重要的特性&#xff0c;开发者可以根据URL的不同来动态地加载和显示不同的组件&#xff0c;从而构建出单页面应用&#xff08;SPA&#xff09;。 以下是Angular路由使用的基本步骤和要点&#xff1a; 1. 安装和配置路由模块 首先&#xf…...

编程日记 2024/8/20 5:19:57

【JVM】深入理解类加载机制(一)

深入理解类加载机制 Klass模型 Java的每个类&#xff0c;在JVM中都有一个对应的Klass类实例与之对应&#xff0c;存储类的元信息如:常量池、属性信息、方法信息…从继承关系上也能看出来&#xff0c;类的元信息是存储在元空间的。普通的Java类在JVM中对应的是InstanceKlass(C)…...

编程日记 2024/8/20 5:16:54

区块链浏览器需求整理

用户需求 普通用户 便捷查询交易记录&#xff1a;能够轻松找到自己或特定地址的交易详情&#xff0c;包括交易时间、金额、状态等。查看账户余额&#xff1a;实时了解地址的余额情况。追踪资产流向&#xff1a;了解自己的资产在区块链上的转移路径。 开发者 智能合约调试&a…...

编程日记 2024/8/20 5:13:50

Laravel 表单验证功能重定向判断

判断主要针对 API 请求和普通页面请求&#xff0c;即 API 的表单验证失败直接响应 JSON&#xff0c;而页面的表单验证失败正常重定向。 看网上基本上是继承 FormRequest 类来实现&#xff0c;其实直接修改异常处理的 Handler 类即可&#xff0c;非常简单。 打开 app/Exception…...

编程日记 2024/8/20 5:11:48

MATLAB口罩检测系统

一、应用背景 作为数字图像处理和计算机视觉领域的一个重要组成部分&#xff0c;利用摄像机对图像进行采集&#xff0c;从图像中检测人脸并进行口罩穿戴的识别的有着非常重要的研究意义和应用价值。面对突如其来的新型肺炎疫情&#xff0c;人们生活秩序被严重打乱。跟普通流感…...

编程日记 2024/8/20 5:07:42

基于pyqt的规则匹配的恶意代码检测系统

当前的恶意代码检测研究中&#xff0c;尽管传统特征匹配&#xff08;signature-based detection&#xff09;仍然广泛应用&#xff0c;但面对快速更新且具有混淆、加壳、动态加载、自变异&#xff08;polymorphism&#xff0f;metamorphism&#xff09;等能力的新型恶意代码&am…...

编程新知 2026/4/1 19:37:12

C++高性能服务开发：忍者像素绘卷推理引擎封装

C高性能服务开发&#xff1a;忍者像素绘卷推理引擎封装 1. 为什么需要高性能推理引擎 在游戏开发领域&#xff0c;实时生成高质量像素艺术的需求正在快速增长。传统的预渲染方式无法满足玩家对个性化内容和动态场景的需求&#xff0c;而直接使用Python等脚本语言运行的AI模型…...

编程新知 2026/4/1 19:00:56

告别虚拟机！在Windows上用WSL2和NDK r27c交叉编译Android动态库（附CMake集成避坑指南）

在Windows上利用WSL2与NDK r27c高效构建Android动态库的完整指南 对于Android开发者而言&#xff0c;跨平台编译一直是个令人头疼的问题。传统虚拟机方案虽然功能完整&#xff0c;但资源占用高、启动慢&#xff0c;而纯Windows环境下的NDK工具链又常常遇到各种兼容性问题。本文…...

编程新知 2026/4/1 18:25:46

告别重复造轮子：用快马AI一键生成可配置的魔鬼面具UI组件库

作为一个经常需要处理各种UI组件的前端开发者&#xff0c;最近在做一个万圣节主题项目时&#xff0c;遇到了一个有趣的挑战&#xff1a;需要快速开发一套可配置的魔鬼面具组件库。传统手动编码方式不仅耗时&#xff0c;而且难以应对多风格需求。幸运的是&#xff0c;我发现了In…...

编程新知 2026/4/1 18:06:09

Qwen3-14B私有部署镜像Visio流程图智能生成：从文本描述到架构图

Qwen3-14B私有部署镜像Visio流程图智能生成&#xff1a;从文本描述到架构图 1. 引言&#xff1a;技术文档绘图的痛点与解决方案 技术文档编写过程中&#xff0c;最耗时费力的环节之一就是绘制系统架构图和流程图。传统方式需要手动在Visio中拖拽图形、调整布局、添加连接线&a…...

编程新知 2026/4/1 17:35:20

Nanbeige4.1-3B惊艳效果：同一硬件下对比Phi-3-mini，Nanbeige长文本保持率+35%

Nanbeige4.1-3B惊艳效果&#xff1a;同一硬件下对比Phi-3-mini&#xff0c;Nanbeige长文本保持率35% 最近&#xff0c;一个只有30亿参数的小模型在开发者圈子里悄悄火了起来。它不是那种动辄千亿参数、需要顶级显卡才能跑的“巨无霸”&#xff0c;而是一个在普通硬件上就能流畅…...

编程新知 2026/4/1 17:13:56

从下载到运行：Pi0模型完整部署指南，适合新手入门

从下载到运行&#xff1a;Pi0模型完整部署指南&#xff0c;适合新手入门 1. 项目简介&#xff1a;什么是Pi0&#xff1f; Pi0是一个视觉-语言-动作流模型&#xff0c;专门为通用机器人控制设计。简单来说&#xff0c;它能让机器人“看懂”周围环境&#xff0c;“听懂”你的指…...

编程新知 2026/4/1 14:13:59

用Matlab模拟大气湍流和相机抖动：从模糊照片到清晰图像的完整复原实战

用Matlab模拟大气湍流和相机抖动&#xff1a;从模糊照片到清晰图像的完整复原实战 当你在高空航拍或长焦拍摄时&#xff0c;是否遇到过图像模糊不清的问题&#xff1f;这种模糊往往源于大气湍流或相机抖动。本文将带你深入理解这些退化现象的数学模型&#xff0c;并手把手教你用…...

编程新知 2026/4/1 13:16:50

告别插件切换！一款满足你所有挖洞需求的浏览器插件助力高效挖洞

0x01 工具介绍 由于目前网上流通的插件功能都各有千秋&#xff0c;每个插件都有他自己的亮点&#xff0c;每次使用都得按场景去选择插件&#xff0c;为了能够有一款属于自己的完美插件&#xff0c;不用来回倒腾切换&#xff0c;由此GodEyes 诞生了。 它是一款可以帮助安全研究…...

编程新知 2026/4/1 12:48:24

手把手教你用Cline插件零成本调用AI Ping的GLM-4.7，5分钟搞定一个React组件

5分钟实战&#xff1a;用Cline插件调用GLM-4.7生成React表单组件 最近在帮团队优化一个后台管理系统时&#xff0c;发现表单页面的重复开发消耗了大量时间。直到同事推荐了AI Ping的GLM-4.7模型配合VSCode的Cline插件&#xff0c;才真正体会到AI辅助编程的"开箱即用"…...

编程新知 2026/4/1 11:39:43