首页 > 其他分享 >div左右两边50%拖拽功能

div左右两边50%拖拽功能

时间:2023-08-11 15:00:18浏览次数:40  
标签:startX color stopResize 50% window isResizing div 拖拽 resize

<template> <div id="app"> <div class="container"> <div class="left" :style="{ width: leftWidth + '%' }"> <h1>Left Content</h1> </div> <div class="dragbar" @mousedown="startResize"></div> <div class="right" :style="{ width: rightWidth + '%' }"> <h1>Right Content</h1> </div> </div> </div> </template>
<script> export default { data() { return { isResizing: false, startX: 0, leftWidth: 50, rightWidth: 50, }; }, computed: {}, methods: { startResize(e) { this.isResizing = true; this.startX = e.clientX; }, resize(e) { if (!this.isResizing) return; const containerWidth = this.$el.offsetWidth; const offsetX = e.clientX - this.startX; const percentageOffsetX = (offsetX / containerWidth) * 100; this.leftWidth += percentageOffsetX; this.rightWidth -= percentageOffsetX; this.startX = e.clientX; }, stopResize() { this.isResizing = false; }, }, mounted() { window.addEventListener("mousemove", this.resize); window.addEventListener("mouseup", this.stopResize); }, beforeDestroy() { window.removeEventListener("mousemove", this.resize); window.removeEventListener("mouseup", this.stopResize); }, }; </script>
<style scoped> .container { display: flex; height: 300px; }
.left, .right { height: 100%; overflow: auto; }
.dragbar { width: 5px; cursor: col-resize; background-color: #ccc; }
.left { background-color: #f0f0f0; }
.right { background-color: #ccc; } </style>

标签:startX,color,stopResize,50%,window,isResizing,div,拖拽,resize
From: https://www.cnblogs.com/Amytest/p/17622995.html

相关文章

  • X509 概述
    在和CA进行一些接触时,我们常常会听到一个名词:X.509。它是一种行业标准或者行业解决方案,在X.509方案中,默认的加密体制是公钥密码体制。为进行身份认证,X.509标准及公共密钥加密系统提供了数字签名的方案。用户可生成一段信息及其摘要(亦称作信息"指纹")。用户用专用密钥对摘要加......
  • 格律诗乐器的生产流程和质量控制流程有感1500字
    第一步:原材料采购格律诗乐器的生产首先需要采购优质的原材料,如木材、金属、弦线等。这些原材料需要经过严格的筛选,确保符合生产要求和乐器的质量标准。供应商的选择是非常重要的,他们必须能够提供高质量的原材料,并能够提供合格的检验证书。第二步:设计和制造在原材料采购完成后,制......
  • 高频SQL 50题(基础版): 文章浏览 I | 2023-08-10
    问题Views表:+---------------+---------+|ColumnName|Type|+---------------+---------+|article_id|int||author_id|int||viewer_id|int||view_date|date|+---------------+---------+此表可能会存在重复行......
  • 达人评测 r7 7735h和i5 13500h选哪个 锐龙r77735h和酷睿i513500h差多少
    i513500h采用10纳米制作工艺最高睿频4.7GHz十二核心十六线程三级缓存18MB热设计功耗(TDP)45W支持最大内存64GB内存类型DDR43200MHzDDR55200MHz集成显卡IntelIrisXeGraphics选i513500H还是r77735h这些点很重要看过你就懂了http://www.adiannao.cn/dyr77735......
  • win10蓝屏0x000000ed 0x0000003B 0x000000d1 0x00000050 bad pool header critical pr
    第一:硬件问题也可能是硬盘数据线或电源线接触不良或与硬盘的规格不符等原因引起的。你检查一下你的硬盘有没有接好,有没有松了,重新接一下,还有最近有没有添加新硬件啊,可能是硬件兼容性不足。把内存条拔下来,擦干净金手指,重新插好,重启电脑看看第二:软件问题此种情况一般是由于磁盘存在错......
  • 《天道》1500
      观看了由王志文主演的《天道》,这个电视剧我很早之前刷抖音的时候就刷到过,当时看得很入迷,这部作品不仅仅是个电视剧这么简单,它更多地是讲述了很多道理,也讲述了丁元英的故事。但是这次博客就格律诗音响的生产流程和质量控制来发表观点。 《天道》是2007年发布的电视剧,主要讲......
  • AcWing 850. Dijkstra求最短路 II
    题目给定一个$n$个点$m$条边的有向图,图中可能存在重边和自环,所有边权均为非负值。请你求出$1$号点到$n$号点的最短距离,如果无法从$1$号点走到$n$号点,则输出$−1$。输入格式第一行包含整数$n$和$m$。接下来$m$行每行包含三个整数$x,y,z$,表示存在一条从点$......
  • R5 7530U和i5 12500h选哪个 锐龙R57530U和酷睿i512500h对比
    R57530U采用Zen3架构为6核12线程,3MB二级缓存,16MB三级缓存选R57530U还是i512500h这些点很重要看过你就懂了http://www.adiannao.cn/dyi512500H为4大核8小核,12核心16线程设计,CPU主频2.5GHz最高睿频4.5GHz三级缓存为18MB功耗(TDP)45W ......
  • Codeforces Round 881 (Div. 3)
    A.SashaandArrayColoring为了让贡献最大,每种颜色只能染两个数显然这两个数为最大值与最小值、次大值与次小值、第三大值与第三小值……以此类推即可B.LongLong为了让和最大,我们需要的就是把所有负数变成正数那么第一问的答案就是\(\sum_{i=1}^n|a_i|\)此外,因为每次变......
  • 高频SQL 50题(基础版): 大的国家 | 2023-08-09
    问题World表:+-------------+---------+|ColumnName|Type|+-------------+---------+|name|varchar||continent|varchar||area|int||population|int||gdp|bigint|+-------------+---------+name是该表......