Feat : 드래그앤드랍 기능 구현

CEOS-Developers · Mar 16, 2024 · 53ebfba · 53ebfba
1 parent 9a94450
commit 53ebfba
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -12,7 +12,7 @@
     <meta property="og:description" content="오늘의 일정을 관리해보세요." />
   </head>
 
-  <body class="container">
+  <body>
     <header class="flex-center">
       <p class="date flex-center" />
       <h1><span class="userName"></span>TODO-LIST</h1>

diff --git a/js/index.js b/js/index.js
@@ -1,4 +1,4 @@
-import { $ } from './util.js';
+import { $, $all } from './util.js';
 
 // 오늘 날짜 문자열 반환
 const getTodayDate = () => {
@@ -17,6 +17,10 @@ const getTodayDate = () => {
 const createItem = (text, isDone = false) => {
   const newItem = document.createElement('li');
 
+  // draggable 속성 추가
+  newItem.setAttribute('draggable', true);
+  newItem.classList.add('draggable');
+
   // 동그라미 아이콘
   const circleIcon = document.createElement('i');
   circleIcon.classList.add('fa-regular', 'fa-circle', 'cursor-pointer');
@@ -137,6 +141,47 @@ const showUserName = () => {
   }
 };
 
+const addDragDropEvents = () => {
+  const draggableItems = $all('.draggable');
+  const containers = $all('.list');
+
+  draggableItems.forEach((el) => {
+    el.addEventListener('dragstart', () => {
+      el.classList.add('dragging');
+    });
+
+    el.addEventListener('dragend', () => {
+      el.classList.remove('dragging');
+    });
+  });
+
+  function getDragAfterElement(container, y) {
+    const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')];
+
+    return draggableElements.reduce(
+      (closest, child) => {
+        const box = child.getBoundingClientRect();
+        const offset = y - box.top - box.height / 2;
+        if (offset < 0 && offset > closest.offset) {
+          return { offset: offset, element: child };
+        } else {
+          return closest;
+        }
+      },
+      { offset: Number.NEGATIVE_INFINITY },
+    ).element;
+  }
+
+  containers.forEach((container) => {
+    container.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      const afterElement = getDragAfterElement(container, e.clientY);
+      const draggable = document.querySelector('.dragging');
+      container.insertBefore(draggable, afterElement);
+    });
+  });
+};
+
 // 초기 실행 함수
 const init = () => {
   showUserName();

diff --git a/style/style.css b/style/style.css
@@ -4,6 +4,12 @@
 
 body {
   background: #f0f6ff;
+  display: flex;
+  padding: 3rem 0;
+
+  gap: 2rem;
+  align-items: center;
+  flex-direction: column;
 }
 
 header {
@@ -19,15 +25,6 @@ main {
   gap: 3rem;
 }
 
-.container {
-  display: flex;
-  padding: 3rem 0;
-
-  gap: 2rem;
-  align-items: center;
-  flex-direction: column;
-}
-
 .input-form {
   display: flex;
   width: 100%;
@@ -98,11 +95,11 @@ main {
 // 스크롤바 css가 안 먹는 이유를 모르겠음..
 /* 스크롤바 막대 */
 
-.list::-webkit-scrollbar-thumb {
+ul::-webkit-scrollbar-thumb {
   background-color: black; /*스크롤바의 색상*/
 }
 
-::-webkit-scrollbar-track {
+ul::-webkit-scrollbar-track {
   background-color: yellow; /*스크롤바 트랙 색상*/
 }
 
@@ -116,16 +113,17 @@ li {
   gap: 1rem;
 }
 
-.hidden {
-  display: none; /* 기본적으로는 숨김 */
-}
-
-.hidden:hover {
-  display: inline-block; /* 호버됐을 때 보이도록 변경 */
-}
-
 .error {
   color: red;
   font-size: 1.4rem;
   margin-left: 0.4rem;
 }
+
+.draggable {
+  cursor: move;
+}
+
+.draggable.dragging {
+  opacity: 0.5;
+  border: 2px dashed red;
+}