<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Mobile Ready TODO List</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
padding: 20px 10px;
margin: 0;
-webkit-tap-highlight-color: transparent;
}
.container {
width: 100%;
max-width: 500px;
background: #fff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
/* ヘッダー部分のレイアウト調整 */
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
h2 {
margin: 0;
color: #333;
font-size: 1.5rem;
}
/* 編集ボタンのスタイル */
#edit-toggle-btn {
background-color: #6c757d;
color: white;
border: none;
padding: 6px 12px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
}
#edit-toggle-btn.active {
background-color: #28a745;
}
.input-group {
display: flex;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border-radius: 8px;
overflow: hidden;
}
#task-input {
flex-grow: 1;
padding: 12px 15px;
border: 1px solid #ddd;
border-right: none;
outline: none;
font-size: 16px;
border-radius: 8px 0 0 8px;
}
#add-btn {
padding: 0 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
font-weight: bold;
font-size: 16px;
border-radius: 0 8px 8px 0;
min-width: 60px;
}
.todo-list {
list-style: none;
padding: 0;
margin: 0;
min-height: 50px;
}
.todo-item {
background-color: #fff;
border-bottom: 1px solid #eee;
padding: 15px 10px;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
touch-action: pan-y;
}
.todo-text {
flex-grow: 1;
font-size: 16px;
padding-right: 10px;
word-break: break-all;
}
/* ★ 編集モード以外の時は非表示にする要素 */
.handle, .delete-btn {
display: none;
}
/* ★ 編集モード(containerにedit-modeクラスがある時)の表示設定 */
.edit-mode .handle {
display: inline-block;
color: #ccc;
margin-right: 10px;
cursor: grab;
font-size: 20px;
}
.edit-mode .delete-btn {
display: block;
background-color: #ff4d4d;
color: white;
border: none;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
margin-left: 5px;
flex-shrink: 0;
}
.sortable-ghost { opacity: 0.4; background-color: #e3f2fd; }
.sortable-drag { background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.15); opacity: 1; }
</style>
</head>
<body>
<div class="container" id="main-container">
<div class="header">
<h2>My Tasks</h2>
<button id="edit-toggle-btn">編集</button>
</div>
<div class="input-group">
<input type="text" id="task-input" placeholder="タスクを入力..." autocomplete="off">
<button id="add-btn">追加</button>
</div>
<ul id="todo-list" class="todo-list"></ul>
</div>
<script>
const input = document.getElementById('task-input');
const addBtn = document.getElementById('add-btn');
const list = document.getElementById('todo-list');
const editToggleBtn = document.getElementById('edit-toggle-btn');
const container = document.getElementById('main-container');
// SortableJSの初期化
let sortable = new Sortable(list, {
animation: 150,
ghostClass: 'sortable-ghost',
dragClass: 'sortable-drag',
handle: '.handle', // ハンドル部分のみでドラッグ可能にする（誤操作防止）
delay: 0,
disabled: true // 初期状態はドラッグ無効
});
// 編集モードの切り替え
editToggleBtn.addEventListener('click', () => {
const isEditMode = container.classList.toggle('edit-mode');
if (isEditMode) {
editToggleBtn.textContent = '完了';
editToggleBtn.classList.add('active');
sortable.option('disabled', false); // ドラッグ有効化
} else {
editToggleBtn.textContent = '編集';
editToggleBtn.classList.remove('active');
sortable.option('disabled', true); // ドラッグ無効化
}
});
// 初期タスク
addTodo('「編集」で並び替えや削除が可能');
addTodo('買い物に行く');
addBtn.addEventListener('click', () => {
const text = input.value.trim();
if (text) {
addTodo(text);
input.value = '';
input.focus();
}
});
input.addEventListener('keypress', (e) => {
if (e.key === 'Enter') addBtn.click();
});
function addTodo(text) {
const li = document.createElement('li');
li.classList.add('todo-item');
li.innerHTML = `
<span class="handle">≡</span>
<span class="todo-text">${text}</span>
<button class="delete-btn">削除</button>
`;
li.querySelector('.delete-btn').addEventListener('click', (e) => {
e.stopPropagation();
li.style.transform = 'translateX(100%)';
li.style.transition = '0.3s';
setTimeout(() => li.remove(), 300);
});
list.appendChild(li);
li.scrollIntoView({ behavior: 'smooth', block: 'end' });
}
</script>
</body>
</html>
使用変数
| addBtn | |
| addTodo -------( Function ) | |
| autocomplete | |
| charset | |
| class | |
| container | |
| content | |
| editToggleBtn | |
| id | |
| innerHTML | |
| input | |
| isEditMode | |
| key | |
| lang | |
| li | |
| list | |
| name | |
| placeholder | |
| scalable | |
| scale | |
| sortable | |
| src | |
| text | |
| textContent | |
| transform | |
| transition | |
| type | |
| value | |
| width |