FILEUP

F diff --git a/css/style.css b/css/style.css
--- a/css/style.css
+++ b/css/style.css
  	justify-content: center;
  }
  
- .filesystem > h2,
  form > h2 {
  	color: #4d4d4d;
  	margin: 0;
  	border-top-right-radius: 0.5rem;
  }
  
+ 
+ .window > h2 button {
+     border: none;
+     padding: 0.3rem 1rem;
+     background: inherit;
+     border-radius: 0;
+ }
+ 
+ .window > h2 button:not(.pathentry):hover {
+     background: white;
+ }
+ 
+ .window > h2 > .separator {
+     flex: 0 0 1px;
+     align-self: stretch;
+     background: #bbb;
+ }
+ 
+ .window > h2 > *:first-child {
+ 	border-top-left-radius: 0.5rem;
+ }
  form p {
  	margin: 1rem 0px 0.3rem 0px;
  }
  
- 
  .hero_form_error {
  	animation: fadein 0.2s;
  	background-color: #ff4d4d;
      display: none;
  }
  
- .filesystem {
+ .window {
  	background: #fafafa;
- 	margin: 1rem;
+ 	margin: 0rem;
  	padding: 0;
  	box-shadow: 0 0.8rem 1.3rem rgba(0,0,0,0.2);
  	border-radius: 0.5rem;
  	border: 1px solid #b9b9b9;
  
      display: block;
+     position: absolute;
+     top: 0;
+     left: 0;
+     width: 800px;
+     height: 600px;
+ }
+ 
+ .window > h2 {
+ 	color: #4d4d4d;
+ 	background: #f0f0f0;
+ 	margin: 0;
+ 	border-top-left-radius: 0.5rem;
+ 	border-top-right-radius: 0.5rem;
+ 
+     cursor: grab;
+ 
+     display: flex;
+     align-items: stretch;
+     font-weight: normal;
+     padding: 0rem;
+     border-bottom: 1px solid #bbb;
+     font-size: 1.3rem;
  }
  
+ 
  .files {
      padding: 0.3rem;
      display: grid;
      filter: brightness(120%);
  }
  
- .filesystem > h2 {
-     display: flex;
-     align-items: stretch;
-     font-weight: normal;
-     padding: 0rem;
-     border-bottom: 1px solid #bbb;
-     font-size: 1.3rem;
- }
- 
- .filesystem > h2 button {
-     border: none;
-     padding: 0.3rem 1rem;
-     background: inherit;
-     border-radius: 0;
- }
- 
- .filesystem > h2 button:not(.pathentry):hover {
-     background: white;
- }
- 
- .filesystem > h2 > .separator {
-     flex: 0 0 1px;
-     align-self: stretch;
-     background: #bbb;
- }
- 
- .filesystem > h2 > *:first-child {
- 	border-top-left-radius: 0.5rem;
- }
  
  .path {
      display: flex;
F diff --git a/loggedin.js b/loggedin.js
--- a/loggedin.js
+++ b/loggedin.js
      xhr.send(data);
  }
  
- function begin_drag(e, fileview) {
+ function begin_drag_fileview(e, fileview) {
      if (dragging)
          end_drag();
  
      dragging_placeholder = document.createElement('div');
-     fileview.visuals.parentNode.insertBefore(dragging_placeholder, fileview.visuals);
+     dragging_fileview = fileview;
  
      dragging = fileview.visuals;
-     dragging_fileview = fileview;
+ 
+     // document.body.appendChild(dragging);
+ 
+     begin_drag(e, fileview.visuals,);
+ }
+ 
+ function begin_drag(e, obj) {
+ 
+     dragging = obj;
      dragging.classList.add("dragged");
  
      var elemRect = dragging.getBoundingClientRect();
+     dragging_offset_x = e.clientX - elemRect.left;
+     dragging_offset_y = -e.clientY + elemRect.top;
+     
  
-     dragging_offset_x = elemRect.width - (elemRect.left - e.clientX);
-     dragging_offset_y = elemRect.top  - e.clientY;
+     console.log(elemRect);
+     console.log(e.clientY, elemRect.top);
+     if (dragging_placeholder)
+         obj.parentNode.insertBefore(dragging_placeholder, obj);
+ 
+     dragging.style.left = (e.clientX - dragging_offset_x) + "px";
+     dragging.style.top  = (e.clientY + dragging_offset_y) + "px";
  
-     dragging.style.position = "absolute";
      dragging.style.width  = elemRect.width  + "px";
      dragging.style.height = elemRect.height + "px";
-     document.body.appendChild(dragging);
  
-     dragging.style.left = (e.clientX - dragging_offset_x) + "px";
-     dragging.style.top  = (e.clientY + dragging_offset_y) + "px";
+     dragging.style.position = "absolute";
+     document.body.appendChild(dragging);
  }
  
- function end_drag(e) {
-     dragging_placeholder.parentNode.insertBefore(dragging, dragging_placeholder);
-     dragging_placeholder.remove();
-     dragging.style.removeProperty("position");
-     dragging.style.removeProperty("width");
-     dragging.style.removeProperty("height");
-     dragging.style.removeProperty("left");
-     dragging.style.removeProperty("top");
+ function end_drag(_e) {
+     if (dragging_placeholder) {
+         dragging_placeholder.parentNode.insertBefore(dragging, dragging_placeholder);
+         dragging_placeholder.remove();
+         dragging_placeholder = null;
+     }
+ 
+     if (dragging_fileview) {
+         dragging.style.removeProperty("position");
+         dragging.style.removeProperty("width");
+         dragging.style.removeProperty("height");
+         dragging.style.removeProperty("left");
+         dragging.style.removeProperty("top");
+         dragging_fileview = null;
+     }
+ 
      dragging.classList.remove("dragged");
      dragging = null;
  }
      }
  
      visuals.ondragstart = (e) => {
-         begin_drag(e, fileview);
+         begin_drag_fileview(e, fileview);
          e.preventDefault();
      };
  
          context_menu.remove();
  }
  
+ function init_window(wnd) {
+     var h2 = wnd.getElementsByTagName("h2")[0];
+     h2.onmousedown = (e) => {
+         begin_drag(e, wnd);
+         e.preventDefault();
+     };
+ }
+ 
+ init_window(document.getElementById("root_window"));
+ 
  load_dir();
F diff --git a/loggedin.php b/loggedin.php
--- a/loggedin.php
+++ b/loggedin.php
  <div>
-     <div class="filesystem">
+     <div class="window" id="root_window">
          <h2 style="display: flex; gap: 0rem;">
              <button id="upload_btn" onclick="begin_upload()">Upload</button>
              <div class="separator"></div>
              <div class="separator"></div>
              <div class="path" id="the_path">
                  <button class="pathentry" id="home_path_entry">
- 		<?php
- 		$user=$_SESSION['user_object'];
- 		echo $user->username;
- 	       	?>
- 		's files</button>
+                     <?php echo $_SESSION['user_object']->username; ?>'s files
+                 </button>
              </div>
          </h2>