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

web实现drag拖拽布局

news 文章来源：https://blog.csdn.net/qq_29528701/article/details/141336925 2025/5/6 0:14:58

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

LeetCode 第三十一天 2024.8.18

1. &#xff1a;买卖股票的最佳时机 题目链接: 121. 买卖股票的最佳时机 - 力扣&#xff08;LeetCode&#xff09; 应用条件&#xff1a; 难点&#xff1a; # 确定dp数组&#xff08;dp table&#xff09;以及下标的含义&#xff1a;dp数组由len(prices)个[][]组成&#xff…...

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

Linux驱动学习之点灯（一）

学习不同的板子我们都是从点灯开始&#xff0c;linux驱动也不例外 驱动开发基础知识 何为驱动&#xff1f; 驱使硬件正常工作的代码就叫做驱动。 在一些mcu里&#xff1a; 无非就是直接操作寄存器&#xff0c;或者用库函数初始化外设&#xff0c;使外设正常工作如初始化iic&…...

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

从HTTP到HTTPS：SSL加密如何重塑互联网安全格局

从HTTP到HTTPS&#xff1a;SSL加密如何重塑互联网安全格局 随着互联网技术的飞速发展&#xff0c;网络安全问题日益凸显&#xff0c;保护用户数据的安全性和隐私性成为了不可忽视的重要议题。从HTTP&#xff08;超文本传输协议&#xff09;到HTTPS&#xff08;超文本传输安全协…...

编程日记 2024/8/20 5:04:38

QT网络编程: 实现UDP通讯设置

目录 一.widget.ui界面设计 二.创建UDP通信 1.pro文件添加network模块。 2.添加对应头文件 3.定义槽函数&#xff0c;即与 UI 中的按钮点击事件相关联的函数 4.定义类的私有成员 5.关闭按钮 6.信息处理 7.绑定端口 8.发送信息 9.效果图 三.代码演示 1.widget.h 2.…...

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

机器学习第十一章--特征选择与稀疏学习

一、子集搜索与评价 我们将属性称为 “特征”(feature&#xff09;&#xff0c;对当前学习任务有用的属性称为 “相关特征”(relevant feature&#xff09;、没什么用的属性称为 “无关特征”(irrelevant feature)&#xff0e;从给定的特征集合中选择出相关特征子集的过程&…...

编程日记 2024/8/20 5:02:36

dm 到 dm 的 HS 同步部署

一、数据库部署 完成两节点数据库部署并初始化&#xff0c;配置参数如下&#xff1a; 节点 192.168.2.132 192.168.2.133 数据库版本 DM8 DM8 实例名 DM1 DM2 端口号 5236 5236 数据文件路径 /home/dmdba/dmdata /home/dmdba/dmdata 二、 dmhs 部署 1. 部署…...

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

ShardingSphere、雪花算法、分布式id生成器CosID概述

ShardingSphere 用处&#xff1a;sharding是分片的意思&#xff0c;sphere是球&#xff08;生态的意思&#xff09;。用来做分库分表的生态的。一个订单表太大&#xff0c;查询会很慢&#xff0c;要分表&#xff0c;分为3个表&#xff0c;这样查询会快一点&#xff0c;所以有了…...

编程日记 2024/8/20 4:59:32

hive学习（四）

一、分区表的数据导入 1.静态分区&#xff08;需要手动指定分区字段的值&#xff09; 直接将文件数据导入到分区表 语法&#xff1a;load data [local] inpath filepath into table tablename partition(分区字段1分区值1, 分区字段2分区值2...); load data [local] inpat…...

编程日记 2024/8/20 4:58:31

UniAD_面向规划的自动驾驶

Planning-oriented Autonomous Driving 面向规划的自动驾驶 https://github.com/OpenDriveLab/UniAD Abstract Modern autonomous driving system is characterized as modular tasks in sequential order, i.e., perception, prediction, and planning. In order to perfor…...

编程日记 2024/8/20 4:57:30

《现代情报》

《现代情报》简介 《现代情报》&#xff08;原名《情报知识》&#xff09;杂志是由吉林省科学技术厅主管&#xff0c;吉林省科学技术信息研究所、中国科学技术情报学会联合主办的信息资源管理领域综合性学术期刊。该刊于1980年创刊&#xff0c;每年12期。重点报道服务于国家战略…...

编程日记 2024/8/20 4:56:29