目前我看主流的都是用js來實現(xiàn)div拖拽效果，不過我個人覺得一直監(jiān)聽拖拽，會耗費很大的性能，畢竟監(jiān)聽盒子的寬高這些屬性，都會觸發(fā)瀏覽器的回流，并且我看了很多博客，他們是能用css實現(xiàn)div左右拖拽效果，但是并沒有一個最小或者最大寬度的限制，導(dǎo)致直接將左右子div壓扁。

藍色虛線是當(dāng)鼠標(biāo)移上去的時候，顯示的拖拽線

大多數(shù)博客的拖拽

?

這種拖拽會將左div或者右div直接壓扁，但是我肯定不想做成這樣子，我想左div有最大和最小寬度限制，然后右div是自適應(yīng)寬度

我實現(xiàn)的拖拽

左最小寬度，我設(shè)置的300px

?

左最大寬度，我設(shè)置的600px

?

?代碼如下

<template><div class="company-manager"><div class="left"><div class="resize-bar"></div><div class="resize-line"></div><div class="resize-save">左側(cè)的內(nèi)容，左側(cè)的內(nèi)容，左側(cè)的內(nèi)容，左側(cè)的內(nèi)容</div></div><div class="right">右側(cè)的內(nèi)容，右側(cè)的內(nèi)容，右側(cè)的內(nèi)容，右側(cè)的內(nèi)容</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>

?

總結(jié)

以上是生活随笔為你收集整理的有趣且重要的css知识合集（1）纯css实现div左右拖拽效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。