hide original card on drag, space between hovered

The original dragged card will hide from the list, giving the illusion of drag, and the cards being hovered by the mouse still dragging the card will create a space between so the user knows where it's going to be dropped.
HectorVilas · Jan 9, 2023 · bb775ef · bb775ef
1 parent 97861f0
commit bb775ef
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
diff --git a/src/modules/ui.js b/src/modules/ui.js
@@ -154,6 +154,7 @@ export const ui = (() => {
     const card = document.createElement("div");
     card.classList.add("card");
     card.dataset.priority = todo.priority;
+    card.addEventListener("mouseenter", spaceCards)
 
     const drag = document.createElement("img");
     drag.classList.add("card-icon", "icon-drag");
@@ -416,6 +417,7 @@ export const ui = (() => {
     const draggingCard = targetCard.cloneNode(true);
     draggingCard.classList.add("dragging-card");
     draggingCard.style.width = `${targetCard.clientWidth}px`;
+    targetCard.classList.add("hidden");
 
     window.addEventListener("mousedown", updateMousePos);
     window.addEventListener("mousemove", updateMousePos);
@@ -433,13 +435,33 @@ export const ui = (() => {
     mouse.y = e.clientY;
   }
 
+  function spaceCards(e){
+    if(e.buttons !== 1 || !document.querySelector(".dragging-card")) return;
+    const projectIdx = this.dataset.projectIdx;
+    const todoIdx = this.dataset.todoIdx;
+    console.log(projectIdx, todoIdx);
+    const cards = document.querySelectorAll(".card:not(.dragging-card):not(.hidden)[data-project-idx][data-todo-idx]");
+    cards.forEach(card => {
+      if(card.dataset.projectIdx === projectIdx
+        && card.dataset.todoIdx === todoIdx){
+          card.style.paddingBottom = "70px";
+        } else {
+          card.style.paddingBottom = "";
+        }
+
+    })
+  }
+
   function cardPlace(){
-    //remove temporal event listener and interval, added by cardDrag()
+    //remove temporal event listener, interval and opacity added by cardDrag()
     clearInterval(cursorInterval);
     window.removeEventListener("mouseup", cardPlace);
     window.removeEventListener("mousedown", updateMousePos);
     window.removeEventListener("mousemove", updateMousePos);
     body.style.userSelect = "text";
+
+    const invisibleCard = document.querySelector(".hidden");
+    invisibleCard.classList.remove("hidden");
 
     const draggingCard = document.querySelector(".dragging-card");
     body.removeChild(draggingCard);

diff --git a/src/style.css b/src/style.css
@@ -735,6 +735,19 @@ input[type="text"], input[type="date"] {
 }
 
 
+
+/* for general use */
+
+.hidden {
+  display: none;
+}
+
+.opacity-zero {
+  opacity: 0;
+}
+
+
+
 /*for testing*/
 /* * {
   outline: 1px solid gray;