Есть ли способ создать панель перетаскивания, основанную на положении, а не на ширине? ⇐ CSS

[Anonymous]

Я хочу создать страницу, на которой будут представлены две статьи рядом друг с другом, и сделать так, чтобы снимок экрана исходной статьи (который находится СЛЕВА) менял положение в соответствии с положением панели перетаскивания, и НЕ меняйте при этом его ширину.
По сути, я просто скопировал код из бесплатного примера CodePen.
А затем изменил высоту и Ширина снимка экрана статьи, которую я сделал, от «Ширина: пикселей; Высота: пикселей» до «Ширина: 100%; Высота: 100%», поэтому он всегда будет соответствовать масштабу div панели перетаскивания. .
Dragbar, который я использовал
Я начал писать функцию, но остановился, потому что я новичок в программировании и толком не знаю все имеющиеся у меня параметры для изменения функций из CodePen так, чтобы они применялись к положению, а не к ширине смещения.
Большое спасибо!=)
Это функция, которую мне нужно изменить, чтобы получить эффект (вероятно):

Код: Выделить всё

left.style.width = (e.pageX - bar.offsetWidth / 2) + 'px';

Это пример того, как НЕ должно быть (сжатие):
введите здесь описание изображения
Вместо этого он ДОЛЖЕН перемещаться с помощью панели перетаскивания (за пределами экрана).
Спасибо!!
Коды:

Код: Выделить всё

  // DRAG BAR (IMAGE) //

var left = document.getElementById('drag-left');
var right = document.getElementById('drag-right');
var dragbar = document.getElementById('dragbar');

var i = document.querySelector('image');

const drag = (e) => {

document.selection ? document.selection.empty() : window.getSelection().removeAllRanges();
left.style.width = (e.pageX - dragbar.offsetWidth / 2) + 'px';

}

dragbar.addEventListener('mousedown', () => {
document.addEventListener('mousemove', drag);

});

dragbar.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', drag);
});

// Unfinished function
/ function moveLeft () {
//   if (dragbar.document.addEventListener(drag)) {
// document.getElementById('drag-left').style.left = "-20%"
//  }
// } /

Код: Выделить всё

/* DRAG BAR (IMAGE) */

.drag-container {
display: flex;
min-height: 100vh;
}

[class^="panel"] {
padding: 0px 0px;
background-color: white;
}

.panel-one {
width: 48%;
}

.panel-two {
flex: 1;
width: 52%;
}

.dragbar {
position: relative;
padding: 20px;
cursor: pointer;
background-color: rgb(25, 0, 75);
}

Код: Выделить всё

Copy


* {
margin: 0;
padding: 0;
box-sizing: border-box;
}








[img]Avatar Swamp.jpg[/img]









Title

By Spongebob



Blah blah blah, some text to fill the space.

Подробнее здесь: https://stackoverflow.com/questions/784 ... ead-of-the