How to make a div increase or decrease using the touchmove?

Question

I’m trying to make a div open as the user drags his finger down, and make it close as he drags his finger up. I searched and saw that I can capture the touch of the user on the screen with the touch events, but I’m not able to make it work.

This is the code I’ve developed so far:

window.addEventListener('load', function(){
 
  var box2 = document.querySelector('#todo'),
    boxleft, 
    startx, 
    dist = 0,
    touchobj = null;
 
  box2.addEventListener('touchstart', function(e){
    touchobj = e.changedTouches[0];
    startx = parseInt(touchobj.clientX);
    e.preventDefault();
  }, false);
 
  box2.addEventListener('touchmove', function(e){
    document.querySelector("#d1").style.height = "100px";
    e.preventDefault();
  }, false);
 
}, false);

#todo {
  background-color: #550000;
  height: 300px;
  width: 100%;
}

#d1 {
  background-color: #555555;
  height: 50px;
  width: 100%;
}

<div id="todo">
  <div id="d1"></div>
</div>