dragDropOverflow.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <html>
  2. <head>
  3. <meta content="text/html; charset=UTF-8" http-equiv="content-type">
  4. <style type="text/css">
  5. body {
  6. color: #222;
  7. font-size: 13px;
  8. }
  9. .time-slot {
  10. height: 47px;
  11. vertical-align: top;
  12. border-top: 1px solid #ddd;
  13. padding-right: 2px;
  14. z-index: 2;
  15. }
  16. #time-marker {
  17. border-top: 3px solid #4d90fe;
  18. height: 6px;
  19. position: absolute;
  20. width: 100%;
  21. z-index: 4;
  22. cursor: row-resize;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div style="position: absolute; overflow: hidden; width: 250px; height: 470px;">
  28. <div style="position: relative;">
  29. <div style="overflow: auto; position: relative; height: 85%; border: 1px solid #ebebeb">
  30. <div id="time-marker" style="top: 432;"></div>
  31. <div class="time-slot">12am</div>
  32. <div class="time-slot">1am</div>
  33. <div class="time-slot">2am</div>
  34. <div class="time-slot">3am</div>
  35. <div class="time-slot">4am</div>
  36. <div class="time-slot">5am</div>
  37. <div class="time-slot">6am</div>
  38. <div class="time-slot">7am</div>
  39. <div class="time-slot">8am</div>
  40. <div class="time-slot">9am</div>
  41. <div class="time-slot">10am</div>
  42. <div id="11am" class="time-slot">11am</div>
  43. <div class="time-slot">12pm</div>
  44. <div class="time-slot">1pm</div>
  45. <div class="time-slot">2pm</div>
  46. <div class="time-slot">3pm</div>
  47. <div class="time-slot">4pm</div>
  48. <div class="time-slot">5pm</div>
  49. <div class="time-slot">6pm</div>
  50. <div class="time-slot">7pm</div>
  51. <div class="time-slot">8pm</div>
  52. <div class="time-slot">9pm</div>
  53. <div class="time-slot">10pm</div>
  54. <div class="time-slot">11pm</div>
  55. </div>
  56. </div>
  57. </div>
  58. <script type="text/javascript">
  59. var startTime = document.getElementById('time-marker');
  60. var ie = document.all;
  61. var nn6 = document.getElementById && !document.all;
  62. var isDrag = false;
  63. var x, y, tx, ty;
  64. var dragEl;
  65. function movemouse(e) {
  66. if (isDrag) {
  67. var dy = (nn6 ? e.clientY - y : event.clientY - y);
  68. if (dy % 12 == 0) {
  69. dragEl.style.top = ty + dy;
  70. }
  71. return false;
  72. }
  73. }
  74. function selectmouse(e) {
  75. var srcEl = nn6 ? e.target : event.srcElement;
  76. var topElement = nn6 ? "HTML" : "BODY";
  77. while (srcEl.tagName != topElement && srcEl != startTime) {
  78. srcEl = nn6 ? srcEl.parentNode : srcEl.parentElement;
  79. }
  80. if (srcEl === startTime) {
  81. isDrag = true;
  82. dragEl = srcEl;
  83. tx = parseInt(dragEl.style.left + 0);
  84. ty = parseInt(dragEl.style.top + 0);
  85. x = nn6 ? e.clientX : event.clientX;
  86. y = nn6 ? e.clientY : event.clientY;
  87. document.onmousemove = movemouse;
  88. return false;
  89. }
  90. }
  91. document.onmousedown = selectmouse;
  92. document.onmouseup = function() { isDrag = false; };
  93. </script>
  94. </body>
  95. </html>