104 lines
No EOL
2.8 KiB
HTML
104 lines
No EOL
2.8 KiB
HTML
<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> |