jQuery实现多个容器一行拖拽调整其中某个的大小

2023-02-21 21:09| 来源: 网络整理| 查看: 265

jQuery实现的，多个容器（这里用的自定义的column，换成div同理）在一行，拖拽中间的分割线，实现调整其左右宽度容器宽度的功能，很实用。点击js拖拽控制容器大小查看效果。截图如下：

css代码：

*{ box-sizing: border-box; } row{ display: flex; } column{ height: 300px; flex-shrink: 0; border: 1px solid red; width: 10%; position: relative; } column span{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.8); background-color: #ccc; font-size: 12px; padding: 2px 5px; line-height: 1; border-radius: 5px; user-select: none; }

html代码如下：

column1 column2 column3 column4 column5

js代码如下：

// 当前操作对象和下一个对象 var curObj, nextObj // 鼠标按下时初始化当前要操作的列(当鼠标位置距离当前column右边框10像素以内时，再操作) $('body').on('mousedown', 'column', function(e) { // 最后一个column，什么都不操作 if($(this).next('column').get(0) === undefined) return if(($(this).outerWidth() - e.offsetX)

【本文地址】

公司简介

联系我们