<html>
<head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
  <style type="text/css">
    body {
      color: #222;
      font-size: 13px;
    }

    .time-slot {
      height: 47px;
      vertical-align: top;
      border-top: 1px solid #ddd;
      padding-right: 2px;
      z-index: 2;
    }

    #time-marker {
      border-top: 3px solid #4d90fe;
      height: 6px;
      position: absolute;
      width: 100%;
      z-index: 4;
      cursor: row-resize;
    }
  </style>
</head>
<body>
<div style="position: absolute; overflow: hidden; width: 250px; height: 470px;">
  <div style="position: relative;">
    <div style="overflow: auto; position: relative; height: 85%; border: 1px solid #ebebeb">
      <div id="time-marker" style="top: 432;"></div>
      <div class="time-slot">12am</div>
      <div class="time-slot">1am</div>
      <div class="time-slot">2am</div>
      <div class="time-slot">3am</div>
      <div class="time-slot">4am</div>
      <div class="time-slot">5am</div>
      <div class="time-slot">6am</div>
      <div class="time-slot">7am</div>
      <div class="time-slot">8am</div>
      <div class="time-slot">9am</div>
      <div class="time-slot">10am</div>
      <div id="11am" class="time-slot">11am</div>
      <div class="time-slot">12pm</div>
      <div class="time-slot">1pm</div>
      <div class="time-slot">2pm</div>
      <div class="time-slot">3pm</div>
      <div class="time-slot">4pm</div>
      <div class="time-slot">5pm</div>
      <div class="time-slot">6pm</div>
      <div class="time-slot">7pm</div>
      <div class="time-slot">8pm</div>
      <div class="time-slot">9pm</div>
      <div class="time-slot">10pm</div>
      <div class="time-slot">11pm</div>
    </div>
  </div>
</div>
<script type="text/javascript">
  var startTime = document.getElementById('time-marker');

  var ie = document.all;
  var nn6 = document.getElementById && !document.all;

  var isDrag = false;
  var x, y, tx, ty;
  var dragEl;

  function movemouse(e) {
    if (isDrag) {
      var dy = (nn6 ? e.clientY - y : event.clientY - y);
      if (dy % 12 == 0) {
        dragEl.style.top = ty + dy;
      }
      return false;
    }
  }

  function selectmouse(e) {
    var srcEl = nn6 ? e.target : event.srcElement;
    var topElement = nn6 ? "HTML" : "BODY";

    while (srcEl.tagName != topElement && srcEl != startTime) {
      srcEl = nn6 ? srcEl.parentNode : srcEl.parentElement;
    }

    if (srcEl === startTime) {
      isDrag = true;
      dragEl = srcEl;
      tx = parseInt(dragEl.style.left + 0);
      ty = parseInt(dragEl.style.top + 0);
      x = nn6 ? e.clientX : event.clientX;
      y = nn6 ? e.clientY : event.clientY;
      document.onmousemove = movemouse;
      return false;
    }
  }

  document.onmousedown = selectmouse;
  document.onmouseup = function() { isDrag = false; };
</script>
</body>
</html>