JSFiddle - React, Tailwind, and code Playground

by leongaban

HTML

<div class="guide-line"></div>
<div style="height:500px; width:500px;background-color:green;">
    <div id="drag-container">
        <div id="dragger">Drag</div>        
        
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam finibus sem euismod sapien tincidunt, eget fermentum sem posuere. Suspendisse et quam volutpat, suscipit nisl a, consequat sem. Nullam nec fringilla nisi, non fringilla nulla. Proin vel diam nec diam consectetur auctor a eget justo. Pellentesque nunc arcu, semper vel mollis et, laoreet eget orci. Pellentesque sagittis justo nec finibus dapibus. Proin iaculis, risus nec malesuada facilisis, ipsum lectus consequat risus, a pulvinar neque dui vel orci. Fusce ac justo id dolor fringilla posuere non vel velit. In vitae nibh porttitor, laoreet mi ut, scelerisque massa.</p>
    </div>
</div>

CSS

body {
    font-family: Arial, sans-serif;
}

#dragger {
    position: absolute;
    left: 100px;
    padding: 10px;
    width: 40px;
    color: white;
    cursor: move;
    background:red;
}

#drag-container {
    position: relative;
    width: 100px;
    height: 100%;
    background: orange;
    z-index:2;
}

#drag-container p {
    padding: 5px;
    font-size: 11px;
}

.guide-line {
    position: absolute;
    width: 100px;
    height: 100%;
    border-right: 1px solid gray;
    z-index: 10;
}

JavaScript

window.onload = addListeners();

var xPosition = 0;

function addListeners() {
    document.getElementById('dragger').addEventListener("click", getClickPosition, false);
    
    document.getElementById('dragger').addEventListener('mousedown', mouseDown, false);
    window.addEventListener('mouseup', mouseUp, false);
}

function getClickPosition(e) {
    xPosition = e.clientX;
    console.log(xPosition);
}

function mouseUp() {
    window.removeEventListener('mousemove', divMove, true);
}

function mouseDown(e) {
  window.addEventListener('mousemove', divMove, true);
}

function divMove(e) {
    var max = 443;
    var x = event.clientX;
    
    if (x > 100 && x < max) {
        var div = document.getElementById('dragger');
        div.style.position = 'absolute';
                
        div.style.left = (e.clientX + xPosition - 40) + 'px';
    }
    
    //console.log(x);
}