I have the below code. the goal is to be able to resize the columns by mousedown event and drag left/right on the black "border" columns. How do I do the actual addition/subtraction and figure out the direction the mouse is being moved?
document.getElementById('border1').onmousedown = function() {
alert('add/remove width on col one/two');
};html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
.col,.border{
display:inline-block;
position: relative;
padding-bottom:100px;
}
.one{
background-color: #2a85ff;
width:18%;
}
.two{
background-color: #83bf6e;
width:18%;
}
.border{
background-color:#000000;
width:5px;
cursor:pointer;
}<div class="col one" id="col1">
1
</div>
<div class="border" id="border1">
</div>
<div class="col two" id="col2">
2
</div>