`; li.addEventListener('dragstart', dragStart); li.addEventListener('dragend', dragEnd); return li; }; const moveTask = (button, targetListId)=>{ const taskItem = button.closest('.task-item'); const targetList = document.getElementById(targetListId); targetList.appendChild(taskItem); hideButtons(taskItem); }; const hideButtons = (taskItem)=>{ const buttons = taskItem.querySelectorAll('button:not(:last-child)'); buttons.forEach((button)=>button.style.display = 'none'); }; const deleteTask = (button)=>{ const taskItem = button.closest('.task-item'); taskItem.remove(); }; const dragStart = (e)=>{ e.target.classList.add('dragging'); }; const dragEnd = (e)=>{ e.target.classList.remove('dragging'); }; const dragOver = (e)=>{ e.preventDefault(); const afterElement = getDragAfterElement(e.currentTarget, e.clientY); const draggable = document.querySelector('.dragging'); if (afterElement == null) { e.currentTarget.appendChild(draggable); } else { e.currentTarget.insertBefore(draggable, afterElement); } }; const getDragAfterElement = (container, y)=>{ const draggableElements = [ ...container.querySelectorAll('.task-item: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; }; const drop = (e)=>{ const taskItem = document.querySelector('.dragging'); hideButtons(taskItem); }; React.useEffect(()=>{ document.getElementById('add-task').addEventListener('click', addTask); document.getElementById('new-task').addEventListener('keypress', function(e) { if (e.key === 'Enter') { addTask(); } }); document.querySelectorAll('.task-list').forEach((list)=>{ list.addEventListener('dragover', dragOver); list.addEventListener('drop', drop); }); }, []); return /*#__PURE__*/ React.createElement("div", { className: "p-[20px] bg-[#FFF5EB] text-[#5D4037] font-segoe-ui", __source: { fileName: "", lineNumber: 100, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#FF9800] text-4xl font-semibold mb-4", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, "ドラッグ&ドロップTodoアプリ"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", id: "new-task", name: "new-task", placeholder: "新しいタスクを入力", className: "w-[70%] p-2 text-lg border-[#FFCC80] rounded-md bg-[#FFF9EF] border", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { id: "add-task", className: "ml-2 p-2 text-lg bg-[#FFB74D] text-white rounded-md hover:bg-[#FFA726] transition-colors", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, "追加")), /*#__PURE__*/ React.createElement("div", { className: "container flex justify-between gap-5", __source: { fileName: "", lineNumber: 119, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "lane flex-1 bg-[#FFFAF2] rounded-md p-4 shadow min-h-[300px]", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#FF9800] text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, "Todo"), /*#__PURE__*/ React.createElement("ul", { className: "task-list list-none p-0 min-h-[50px]", id: "todo-list", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "lane flex-1 bg-[#FFFAF2] rounded-md p-4 shadow min-h-[300px]", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#FF9800] text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, "In Progress"), /*#__PURE__*/ React.createElement("ul", { className: "task-list list-none p-0 min-h-[50px]", id: "in-progress-list", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "lane flex-1 bg-[#FFFAF2] rounded-md p-4 shadow min-h-[300px]", __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#FF9800] text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }, "Done"), /*#__PURE__*/ React.createElement("ul", { className: "task-list list-none p-0 min-h-[50px]", id: "done-list", __source: { fileName: "", lineNumber: 142, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 148, columnNumber: 7 }, __self: this }, ` .text-[#FF9800] { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); } .task-item { background-color: #fff3e0; margin-bottom: 10px; padding: 10px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; cursor: move; } .task-item button { background-color: #ffb74d; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } .task-item button:hover { background-color: #ffa726; } .dragging { opacity: 0.5; } `)); }