123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104 |
- <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>
|