I need to drag the blue rectangle to the left so that it becomes visible to users.
I tried making it ‘position: relative’ and it let me change its position with ‘left: 40px’ – but then it completely destroyed the display of the page.
Is that even possible to change an element’s position while inside a flexbox?
Thank you.
var left = document.getElementById('drag-left');
var right = document.getElementById('drag-right');
var bar = document.getElementById('dragbar');
const drag = (e) => {
document.selection ? document.selection.empty() : window.getSelection().removeAllRanges();
left.style.width = (e.pageX - bar.offsetWidth / 2) + 'px';
}
bar.addEventListener('mousedown', () => {
document.addEventListener('mousemove', drag);
});
bar.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', drag);
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-align: center;
}
body {
overflow-x: hidden;
}
.drag-container {
display: flex;
min-height: 100vh;
}
[class^="panel"] {
padding: 0px 0px;
background-color: white;
}
.panel-one {
width: 44.6%;
}
.panel-two {
flex: 1;
width: 56.4%;
}
.dragbar {
position: relative;
padding: 2px;
cursor: pointer;
background-color: rgb(25, 0, 75);
}
.slider {
position: relative;
z-index: 9;
cursor: pointer;
/*set the appearance of the slider:*/
width: 40px;
height: 40px;
}<div class="drag-container">
<div class="panel-one" ; id="drag-left">
<img src="https://i.sstatic.net/nvhgVgPN.png" ; style="display: block; width: 100%;">
<h1 style="text-decoration: underline;">Safkfsdf Akslefos Alpsdfd</h1>
<br>
<br>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam reprehenderit modi eius numquam.Quia saepe nulla aliquid nesciunt et a pariatur expedita mollitia. Suscipit necessitatibus temporibus architecto ea rerum eveniet. Vitae quis sint tenetur
impedit corrupti esse error amet minima enim. Eos quas similique aperiam itaque autem. Veritatis optio deleniti, deserunt animi soluta, nam ab aut maxime inventore quis voluptate. Ipsam, corporis earum. Ipsa quasi ipsum eius, dolor dolore assumenda!
Eum quod fugit iste dignissimos exercitationem libero, numquam reprehenderit, rerum totam, delectus expedita voluptas nam unde! Magnam corrupti ratione amet. Quaerat quasi qui pariatur earum nobis velit, nemo consectetur laborum tenetur sed! Modi
ipsa temporibus mollitia dolor inventore. Sapiente molestias alias nesciunt! Dolor non quas soluta eaque repellendus enim ipsam.
</p>
</div>
<div class="dragbar" ; id="dragbar">
<div class="slider"></div>
</div>
<div class="panel-two" ; id="drag-right">
<img src="https://i.sstatic.net/t3LSZHyf.png" ; width="214%" ; height="100%">
</div>
</div>Thank you