dragging files part 2 of N

2 files changed, 28 insertions, 7 deletions

diff --git a/css/style.css b/css/style.css
index bbd2035..dbeca93 100644
--- a/css/style.css
+++ b/css/style.css
@@ -269,8 +269,11 @@ input[type=submit]:hover {
     border-radius: 0.3rem;
 }
 
-.file:hover {
-    padding: 0.5rem;
+.file.dragged {
+    border: none;
+}
+
+.file:hover:not(.dragged) {
     background: white;
     color: black;
     border-color: #ddd;
diff --git a/loggedin.js b/loggedin.js
index 62bd536..0d59433 100644
--- a/loggedin.js
+++ b/loggedin.js
@@ -167,14 +167,14 @@ function new_folder() {
 }
 
 function begin_drag(e, fileview) {
-    if (dragging) {
-        alert("AAAAAAAAAAAAAA");
-    }
+    if (dragging)
+        end_drag();
 
     dragging_placeholder = document.createElement('div');
     fileview.visuals.parentNode.insertBefore(dragging_placeholder, fileview.visuals);
 
     dragging = fileview.visuals;
+    dragging.classList.add("dragged");
 
     var elemRect = dragging.getBoundingClientRect();
 
@@ -182,11 +182,24 @@ function begin_drag(e, fileview) {
     dragging_offset_y = elemRect.top  - e.clientY;
 
     dragging.style.position = "absolute";
-    dragging.style.top = "0px";
-    dragging.style.left = "0px";
     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";
+}
+
+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");
+    dragging.classList.remove("dragged");
+    dragging = null;
 }
 
 function add_file_visuals(fileview) {
@@ -284,4 +297,9 @@ document.body.onmousemove = (e) => {
     }
 }
 
+document.body.onmouseup = (e) => {
+    if (dragging)
+        end_drag();
+}
+
 load_dir();