有趣且重要的css知识合集（1）纯css实现div左右拖拽效果

目前我看主流的都是用js来实现div拖拽效果，不过我个人觉得一直监听拖拽，会耗费很大的性能，毕竟监听盒子的宽高这些属性，都会触发浏览器的回流，并且我看了很多博客，他们是能用css实现div左右拖拽效果，但是并没有一个最小或者最大宽度的限制，导致直接将左右子div压扁。

蓝色虚线是当鼠标移上去的时候，显示的拖拽线

大多数博客的拖拽

这种拖拽会将左div或者右div直接压扁，但是我肯定不想做成这样子，我想左div有最大和最小宽度限制，然后右div是自适应宽度

我实现的拖拽

左最小宽度，我设置的300px

左最大宽度，我设置的600px

代码如下

<template><div class="company-manager"><div class="left"><div class="resize-bar"></div><div class="resize-line"></div><div class="resize-save">左侧的内容，左侧的内容，左侧的内容，左侧的内容</div></div><div class="right">右侧的内容，右侧的内容，右侧的内容，右侧的内容</div></div>
</template>

<style scoped lang='scss'>.company-manager {display: flex;overflow: hidden;.left {height: 400px;background-color: #fff;position: relative;.resize-save {position: absolute;top: 0;right: 5px;bottom: 0;left: 0;padding: 16px;overflow-x: hidden;}.resize-bar {height: inherit;resize: horizontal;opacity: 0;cursor: ew-resize;width: 300px;min-width: 300px; /* 最小宽度 300px */max-width: 600px; /* 最大宽度 600px */overflow: scroll;}.resize-line {position: absolute;right: 0;top: 0;bottom: 0;border-right: 2px solid #eee;border-left: 1px solid #bbb;pointer-events: none;}.resize-bar:hover ~ .resize-line,.resize-bar:active ~ .resize-line {border-left: 1px dashed skyblue;}.resize-bar::-webkit-scrollbar {width: 300px;height: inherit;}}.right {height: 400px;padding: 16px;flex: 1 1 auto;background-color: #eee;box-sizing: border-box;overflow: hidden;}}
</style>

有趣且重要的css知识合集（1）纯css实现div左右拖拽效果相关推荐

5去掉button按钮的点击样式_各种好看的小按钮合集，纯css编写，最近在学习时遇到的，记录成为笔记...
写在前面最近忙着实习的事,前往广州,租房,置办东西等等.用碎片化的时间看了一些博客,也看到不少我认为很不错的通过纯css来打造的按钮样式.记录下来以后开发的时候或许能用上. 亮起来按钮 <di ...
button按钮样式_各种好看的小按钮合集，纯css编写，最近在学习时遇到的，记录成为笔记...
写在前面最近忙着实习的事,前往广州,租房,置办东西等等.用碎片化的时间看了一些博客,也看到不少我认为很不错的通过纯css来打造的按钮样式.记录下来以后开发的时候或许能用上. 亮起来按钮 < 简 ...
有趣且重要的css知识合集（6）动态控制css伪元素【var()】
在vue里,js和css的属性可以随意控制,比如:class和:style,但是我们想要动态控制伪元素的属性该怎么做呢? 比如下图,右下角小圆圈就是通过伪元素定义上去的,那我们想要自由实现伪元素的显示 ...
有趣且重要的JS知识合集（18）浏览器实现前端录音功能
1.主题描述兼容多个浏览器下的前端录音功能,实现六大录音功能: 1.开始录音 2.暂停录音 3.继续录音 4.结束录音 5.播放录音 6.上传录音 2.示例功能初始状态: 开始录音: 结束录音: ...
有趣且重要的Git知识合集（8）git commit 重新提交（—amend —no-edit）
当我们已经commit提交过一次了,然后发现还有些代码没改完,这个时候,很多童鞋都会考虑,再commit一次就行了,但是在git记录中就会出现两条commit,其实问题不大,但是如果有很多这种情况,就 ...
有趣且重要的Git知识合集（7）git stash报错 Too many revisions specified: ‘stash@‘ ‘MAA=‘ ‘xml‘ ‘text‘
在我们想要查看stash list中储存的代码时,就先 git stash list 然后会出现下图所示这时候再输入 git stash show -p stash@{0} 但是,会出现这种报错 T ...
有趣且重要的JS知识合集（15）前端上传视频后获取视频的相关信息
通过视频文件上传后监听loadedmetadata事件来获取视频属性 getVideoInfo(file) {return new Promise(resolve => {const video ...
写给Android App开发人员看的Android底层知识合集（1-8）
写给Android App开发人员看的Android底层知识合集(1-8) 转自包老师:http://www.cnblogs.com/Jax/p/6864103.html 写给Android App开 ...
2021最新FCPX插件合集打包下载Final Cut Pro X插件大全效果/转场/字幕/发生器
2021最新FCPX插件合集打包下载Final Cut Pro X插件大全效果/转场/字幕/发生器原文及下载地址:https://www.aeziyuan.com/t-19358.html 使用系 ...

有趣且重要的css知识合集（1）纯css实现div左右拖拽效果

有趣且重要的css知识合集（1）纯css实现div左右拖拽效果相关推荐

最新文章

热门文章