使用HTML、CSS和JS创建可调整大小的两个面板

r1zhe5dt 于 2023-03-14 发布在其他

关注(0)|答案(1)|浏览(142)

因此，我想创建两个面板，可以通过水平拖动按钮调整大小。如下图所示：
The picture link
那么，它可以创建HTML，CSS和JavaScript？

我先尝试的？

我使用了interact.js的可调整大小特性;但它并没有解决我的问题。它只是调整了一个面板的大小，但我想同时调整两个面板的大小。

我尝试的代码：

<style>
  .container {
    width: 100%;
height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eee;
}

.container .section {
    resize: horizontal;
    padding: 0;
    margin: 0;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box;
}

.container .section:nth-child(odd) {
    border-right: 5px solid rgb(17,17,17);
}

.container .section:nth-child(even) {
    border-left: 5px solid rgb(17,17,17);
}
</style>
<div class="container">
   <div class="section">Section 0</div>
   <div class="section">Section 1</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<script>
interact('.container .section:nth-child(odd)')
        .resizable({
            edges: { top: false, left: false, bottom: false, right: true },
            listeners: {
            move: function (event) {
                let { x, y } = event.target.dataset

                x = (parseFloat(x) || 0) + event.deltaRect.left
                y = (parseFloat(y) || 0) + event.deltaRect.top

                Object.assign(event.target.style, {
                width: `${event.rect.width}px`,
                height: `${event.rect.height}px`,
                transform: `translate(${x}px, ${y}px)`
                })

                Object.assign(event.target.dataset, { x, y })
            }
            }
        })

        interact('.container .section:nth-child(even)')
        .resizable({
            edges: { top: false, left: true, bottom: false, right: false },
            listeners: {
            move: function (event) {
                let { x, y } = event.target.dataset

                x = (parseFloat(x) || 0) + event.deltaRect.left
                y = (parseFloat(y) || 0) + event.deltaRect.top

                Object.assign(event.target.style, {
                width: `${event.rect.width}px`,
                height: `${event.rect.height}px`,
                transform: `translate(${x}px, ${y}px)`
                })

                Object.assign(event.target.dataset, { x, y })
            }
            }
        })
</script>

我想做的是当我将第二个面板的宽度调整为viewport-width的30%时，第一个面板的宽度将为viewport-width的70%。

css

来源：https://stackoverflow.com/questions/75705878/creating-resizable-two-panels-with-html-css-js

1条答案

按热度按时间

slsn1g291#

要实现所需的功能，可以在可拖动按钮上使用mousemove事件来动态更新两个面板的宽度，下面是一个使用HTML、CSS和vanilla JavaScript的示例实现：

const draggable = document.querySelector('.draggable');
const leftPanel = document.querySelector('.left-panel');
const rightPanel = document.querySelector('.right-panel');

let isDragging = false;
let initialWidth;

draggable.addEventListener('mousedown', (event) => {
  isDragging = true;
  initialWidth = leftPanel.offsetWidth;
});

document.addEventListener('mousemove', (event) => {
  if (isDragging) {
    const currentWidth = initialWidth + event.clientX - draggable.offsetLeft;
    const containerWidth = leftPanel.offsetWidth + rightPanel.offsetWidth;
    const leftPanelWidth = (currentWidth / containerWidth) * 100;
    const rightPanelWidth = 100 - leftPanelWidth;

    leftPanel.style.width = `${leftPanelWidth}%`;
    rightPanel.style.width = `${rightPanelWidth}%`;
  }
});

document.addEventListener('mouseup', (event) => {
  isDragging = false;
});

.container {
  position: relative;
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.panel {
  height: 100%;
  overflow-y: auto;
  padding: 20px;
}

.left-panel {
  flex-grow: 1;
  background-color: #eee;
}

.right-panel {
  flex-grow: 1;
  background-color: #fff;
}

.draggable {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: ew-resize;
  background-color: #ccc;
  z-index: 1;
}

<div class="container">
  <div class="panel left-panel">
    <h2>Left Panel</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus accumsan in sem in aliquam.</p>
  </div>
  <div class="draggable"></div>
  <div class="panel right-panel">
    <h2>Right Panel</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus accumsan in sem in aliquam.</p>
  </div>
</div>

在这个实现中，我们使用可拖动按钮上的mousedown事件来设置一个标志，指示按钮正在被拖动，我们还存储了左面板的初始宽度。
在mousemove上，我们根据鼠标按下事件后鼠标移动的距离计算左面板的新宽度，还通过从100中减去新的左面板宽度计算右面板的新宽度。
最后，在mouseup时，我们清除拖动标志以指示按钮不再被拖动。
注意，这个实现假设容器元素有一个固定的高度（在这个例子中，100vh），如果容器的高度可以变化，你可能需要调整计算来考虑这一点。

赞(0）回复(0）举报 2023-03-14

我来回答

使用HTML、CSS和JS创建可调整大小的两个面板

我先尝试的？

我尝试的代码：

1条答案

相关问题

热门标签

最新问答