JSFiddle - React, Tailwind, and code Playground

by leongaban

HTML

<div class="guide-line"></div>
<div style="height:300px; width:100%; background-color:green;">
    <div id="drag-container">
        <div id="dragger">Drag</div>
        <p>
            <h2>#drag-container This content should stretch out</h2>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie vitae ante sed ultrices. Curabitur cursus justo tincidunt tortor sollicitudin aliquam. Aliquam sed vulputate lacus, eu scelerisque eros. Proin sed molestie mi. Mauris facilisis dui a quam mattis tristique. Duis est sapien, pretium a nisi a, facilisis varius tellus. Aenean augue purus, aliquet in urna hendrerit, congue gravida odio. Mauris mattis volutpat lacus sed pellentesque. Duis scelerisque euismod ipsum a porta.
        </p>
    </div>
    
    <div class="graph-section">
        <img src="http://placehold.it/350x150"/>
    </div>
</div>

CSS

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

#dragger {
    position: absolute;
    left: 100px;
    padding: 10px;
    width: 40px;
    height: 80px;
    color: white;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: move;
    background:red;
}

#drag-container {
    float: left;
    position: relative;
    padding: 0 5px;
    width: 90px;
    height: 100%;
    background: orange;
    z-index:2;
}
#drag-container h2 {
    font-size: 11px;
    margin-bottom: 5px;
}
#drag-container p {
    
    font-size: 8px;
}

.graph-section {
    float: left;
    background: gray;
}

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

JavaScript

window.onload = addListeners();

var xPosition = 0;

var wW = window.innerWidth;
console.log(wW);

function addListeners() {
    document.getElementById('drag-container').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 = (window.innerWidth - 50);
    var x = event.clientX;
    var div = document.getElementById('dragger');
    var offset = div.offsetWidth/2;
    
    console.log(max);
    
    if (x > (100 + offset) && x < (max+offset)) {
        
        div.style.position = 'absolute';
        
        div.x = xPosition;

        div.style.left = (e.clientX - offset) + 'px';
    }
    
    console.log(x);
}