【JS 实现 :可拖动改变上下两个区域大小】

JS 实现 :可拖动改变上下两个区域大小

https://blog.csdn.net/qq_41646249/article/details/120994215

<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>ResizeBar 上下移动</title>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.js'></script>

    <style type='text/css'>
        body,
        html {
   
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #main {
   
            background-color: BurlyWood;
            position: absolute;
            height: 40%;
            right: 0;
            left: 0;
            top: 60%;
            margin-top: 10px;
        }

        #sidebar {
   
            background-color: IndianRed;
       
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现表头固定和列宽可拖动改变宽度大小的方案可以使用 CSSJavaScript实现。下面是一个简单的示例代码: HTML: ```html <div class="table-wrapper"> <table> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> </tr> </thead> <tbody> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> <td>Row 1, Column 4</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> <td>Row 2, Column 4</td> </tr> <tr> <td>Row 3, Column 1</td> <td>Row 3, Column 2</td> <td>Row 3, Column 3</td> <td>Row 3, Column 4</td> </tr> <tr> <td>Row 4, Column 1</td> <td>Row 4, Column 2</td> <td>Row 4, Column 3</td> <td>Row 4, Column 4</td> </tr> </tbody> </table> </div> ``` CSS: ```css .table-wrapper { overflow-x: auto; max-width: 100%; } table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border: 1px solid #ddd; } th { position: sticky; top: 0; background-color: #f2f2f2; } td { font-size: 14px; } .resize-handle { position: absolute; top: 0; right: 0; bottom: 0; width: 10px; cursor: col-resize; z-index: 1; background-color: #fff; border-left: 1px solid #ddd; } ``` JavaScript: ```javascript const table = document.querySelector('table'); const cols = table.querySelectorAll('th'); let isResizing = false; let currentCol = null; let initialX = null; let currentWidth = null; cols.forEach(col => { const resizeHandle = document.createElement('div'); resizeHandle.classList.add('resize-handle'); col.appendChild(resizeHandle); resizeHandle.addEventListener('mousedown', function(event) { currentCol = event.target.parentElement; initialX = event.clientX; currentWidth = parseInt(getComputedStyle(currentCol).width, 10); isResizing = true; }); }); document.addEventListener('mousemove', function(event) { if (isResizing) { const width = currentWidth + event.clientX - initialX; currentCol.style.width = `${width}px`; } }); document.addEventListener('mouseup', function(event) { isResizing = false; currentCol = null; initialX = null; currentWidth = null; }); ``` 这段代码使用了 CSS 的 sticky 定位和 JavaScript 的 mousemove 和 mouseup 事件,以实现表头固定和列宽可拖动改变宽度大小的效果。可以根据具体需求进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值