Advertisement
Guest User

Draggable 98.css box

a guest
May 1st, 2023
550
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.09 KB | None | 0 0
  1. <link
  2. rel="stylesheet"
  3. href="https://unpkg.com/98.css"
  4. >
  5.  
  6. <style>
  7. #windowheader {
  8. height: auto;
  9. width: auto;
  10. }
  11. #window {
  12. height: auto;
  13. width: auto;
  14. position: absolute;
  15. }
  16. </style>
  17.  
  18. <div id="window">
  19. <div class="window" style="width: 320px">
  20. <div id="windowheader">
  21. <div class="title-bar">
  22. <div class="title-bar-text">A Window With A Status Bar</div>
  23. <div class="title-bar-controls">
  24. <button aria-label="Minimize"></button>
  25. <button aria-label="Maximize"></button>
  26. <button aria-label="Close"></button>
  27. </div>
  28. </div>
  29. </div><!--windowheader-->
  30. <div class="window-body">
  31. Ugh
  32. </div>
  33. <div class="status-bar">
  34. <p class="status-bar-field">Press F1 for help</p>
  35. <p class="status-bar-field">Slide 1</p>
  36. <p class="status-bar-field">CPU Usage: 14%</p>
  37. </div>
  38. </div>
  39. </div><!--window id-->
  40.  
  41. <script>
  42. //Make the DIV element draggagle:
  43. dragElement(document.getElementById("window"));
  44.  
  45. function dragElement(elmnt) {
  46. var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  47. if (document.getElementById(elmnt.id + "header")) {
  48. /* if present, the header is where you move the DIV from:*/
  49. document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  50. } else {
  51. /* otherwise, move the DIV from anywhere inside the DIV:*/
  52. elmnt.onmousedown = dragMouseDown;
  53. }
  54.  
  55. function dragMouseDown(e) {
  56. e = e || window.event;
  57. e.preventDefault();
  58. // get the mouse cursor position at startup:
  59. pos3 = e.clientX;
  60. pos4 = e.clientY;
  61. document.onmouseup = closeDragElement;
  62. // call a function whenever the cursor moves:
  63. document.onmousemove = elementDrag;
  64. }
  65.  
  66. function elementDrag(e) {
  67. e = e || window.event;
  68. e.preventDefault();
  69. // calculate the new cursor position:
  70. pos1 = pos3 - e.clientX;
  71. pos2 = pos4 - e.clientY;
  72. pos3 = e.clientX;
  73. pos4 = e.clientY;
  74. // set the element's new position:
  75. elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
  76. elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  77. }
  78.  
  79. function closeDragElement() {
  80. /* stop moving when mouse button is released:*/
  81. document.onmouseup = null;
  82. document.onmousemove = null;
  83. }
  84. }
  85. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement