div上下拖拽（resize）

实现拖拽的方式有很多种，css实现可能不是最好的实现方式，仅供参考。

话不多说，先上图

需求介绍：主要实现的是 中间区域（红框）内可以托住上下拖动.
功能实现所需：resize: css3新增属性，放在div上即可使其可以拖拽，详见:resize介绍文档(https://www.w3school.com.cn/cssref/pr_resize.asp)cursor:ns-resize，上下拖拽鼠标图标.详见：[cursor属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor)position:这个就不多说了-webkit-scrollbar :设置滚动条样式 详见：[滚动条样式](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar)

代码展示：

<!-- 可拖动模版 -->
<!-- 建议：最好使用纯html标签，如果其他封装的ui类库标签可能会有不必要的麻烦另：如果单纯是上下区域，可以忽略.resize__save下的区域分类，不影响整体
-->
<!-- 主要区域部分：.drawer__wrap下区分了.top__info和.bottom__info,也就是上下两部分需要拖拽改变的区域.top__info中进行了拖拽功能,里面分为了必不可少的三部分.resize__bar即为拖拽的bar.resize__line是拖拽线的展示.resize__save 为主体内容部区域，也就是将展示的内容放在这里（内容根据自己业务定义，没有规定）
--><div class="drawer__wrap"><div class="top__info"><div class="resize__bar"></div> <div class="resize__line"></div><div class="resize__save"><div class="tree__info">左侧栏</div><div class="node__info"><div class="detail__title">右侧标题</div><div class="detail__info">右侧区</div></div></div></div><div class="bottom__info">下方区域</div></div>

css部分代码：

// css是世界上最难滴‘语言’，择重点讲解，业务不同具体css因人而异，不过大同小异。
首先将上下两部分(.top__info和.bottom__info放在外层.drawer__wrap下运用flex布局进行上下区分)
上面部分（.top__info）的进行position:relative定位，并且设置overflow:hidden进行超出隐藏，以便拖动的时候隐藏不会超出。
.top__info中有三块区域：1、.resize__save 内容区：设置position:absolute使其与其他区域区分开来，使其可以不受影响，独立展示其中的top right bottom都设置了0，而bottom设置了10px，是为了留出一个给拖拽div不被盖住的区域2、.resize__bar 拖拽的bar 其实是一个趴在后面的div,利用这个div放大缩小来控制外层div的放大缩小bar的height也就是原始top区域的高度，opacity: 0;来让其视觉隐藏起来min-height 来设置最小或最大可拖拽的大小3、.resize__bar::-webkit-scrollbar 因为css3提供的拖拽resize属性只会加到右下角，形成一个小图标，并不能让整块区域可拖拽，所以通过将滚动条放大到与拖拽bar相同的宽度的方式，也将拖拽放大了4、.resize__line 因为我们将拖拽bar隐藏了，所以我们做一个线来让视觉上可以拖拽（其实拖动的是bar而不是line）通过position定位的方式将其放到top的底部 right和left设置其所在的位置，让其看起来像一条线。5、.resize__bar:hover~.resize__line,.resize__bar:active~.resize__line 通过设置样式让鼠标放在线上像是可点击


// 拖动start
.drawer__wrap {display: flex;flex-direction: column;width: 100%;overflow: hidden;.top__info {width: 100%;position: relative;overflow: hidden;display: flex;justify-content: center;.resize__save {position: absolute;top: 0;right: 0;bottom: 10px;left: 0;overflow-x: hidden;border-bottom: 1px solid #e5e7eb;display: flex;justify-content: center;.tree__info {flex: 0 0 35%;overflow: auto;}.node__info {flex: 0 0 65%;padding: 8px;border-left: 1px solid #e5e7eb;}}.resize__bar {width: 300px;resize: vertical;cursor: ns-resize;opacity: 0;height: 230px;overflow: scroll;min-height: 20px;}.resize__bar::-webkit-scrollbar {width: 300px;height: inherit;}.resize__line {position: absolute;right: 45%;left: 44%;bottom: 0;pointer-events: ns-resize;border-bottom: 3px solid #D8D8D8;}.resize__bar:hover~.resize__line,.resize__bar:active~.resize__line {border-bottom: 3px solid gray;}}.bottom__info {width: 100%;padding: 16px;box-sizing: border-box;overflow: hidden;}
}// 拖动-end

div上下拖拽（resize）相关推荐

有趣且重要的css知识合集（1）纯css实现div左右拖拽效果
目前我看主流的都是用js来实现div拖拽效果,不过我个人觉得一直监听拖拽,会耗费很大的性能,毕竟监听盒子的宽高这些属性,都会触发浏览器的回流,并且我看了很多博客,他们是能用css实现div左右拖拽效果 ...
鼠标事件：onclick、onmousedown、onmouseup、onmouseover、onmouseout、onmouseenter、onmouseleave、鼠标的按键、 div简单拖拽
鼠标事件: onclick:在鼠标左健点击弹起之后触发的事件,即一次完整的鼠标点击过程.过程完成瞬间触发函数. onmousedown:事件会在鼠标按键被按下时发生. onmo ...
div边框拖拽改变宽度
css盒子如下图: 注意: 刚开始测试效果不是很好,原因行内块元素之间有缝隙消除行内块元素左右之间的间隙:给父元素设置为弹性布局flex <!DOCTYPE html> <html ...
vue 拖拽【单个div实现拖拽】
1.HTML <div class="kongtiaojifang" ref="kongtiao" @mousedown="mouseDownH ...
理解事件捕获。在限制范围内拖拽div+吸附+事件捕获
一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二 ...
js实现可拖拽的div
实现一个div可以被拖拽,代码如下所示: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
vue+vuedraggable 实现文字/按钮/div拖拽组件详解
先看成果:(样式业务简陋请见谅!) 如图:左侧按钮/div/span/拖拽到右侧生成组件,右侧组件之间也可以互相碰撞替换: 左右都是数组,拖拽的过程相当于两个数组数据的迁移本功能使用得draggab ...
css拖拽调整高度,两种为wangEditor添加拖拽调整高度的方式：CSS3和jQuery UI
wangEditor是一款优秀的Web富文本编辑器,但如果能像KindEditor那样支持拖拽调整高度就更好了.有两种方式可以为wangEditor添加这一功能,这里使用的wangEditor版本为2 ...
dom 元素拖拽实现
文章目录原生 JS 实现 div 拖拽 HTML 拖拽 API REF 之前找实习的时候,面试官出了道 "原生 JS 实现 div 元素拖拽",当时实现了个大概,不过很多细节 ...

div上下拖拽（resize）

div上下拖拽（resize）相关推荐

最新文章

热门文章