Создание изменяемых двух панелей с HTML & CSS & JS ⇐ Html

[Anonymous]

Итак, я хочу создать две панели, которые можно сехать с использованием использования с помощью горизонтальной кнопки перетаскивания. Я показал на рисунке ниже:



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 })
}
}
})

< /code>
То, что я хотел сделать; Когда я изменил ширину второй панели при 30% просмотра ширины, ширина первой панели будет составлять 70% от ширины просмотра.

Подробнее здесь: https://stackoverflow.com/questions/757 ... tml-css-js