rm -r

🚀 Веб-разработка с нуля: Урок 14 - Drag&Drop сортировка

Привет, будущие гуру интерфейсов! 👨💻👩💻
Сегодня добавим в наш To-Do List профессиональную сортировку задач перетаскиванием — как в лучших менеджерах задач!

🔥 Что нового освоим:
1. HTML5 Drag and Drop API
2. Работу с событиями перетаскивания
3. Сохранение порядка задач в localStorage

🖱 Основные события Drag&Drop:
- dragstart — начало перетаскивания
- dragover — элемент над областью сброса
- drop — сброс элемента
- dragend — завершение перетаскивания

💻 Реализуем сортировку:

1. Обновляем HTML (добавляем атрибуты draggable):

<ul id="taskList">
  <!-- Для каждого li добавляем -->
  <li draggable="true" data-id="1">...</li>
</ul>

2. Добавляем стили для перетаскивания:

/* В styles.css */
li[draggable="true"] {
  cursor: grab;
}

li.dragging {
  opacity: 0.5;
  background: #f8f9fa;
  border: 2px dashed #007bff;
}

li.drag-over {
  border-top: 2px solid #28a745;
}

3. Модернизируем JavaScript:

// В script.js
let draggedItem = null;

function setupDragAndDrop() {
  const items = document.querySelectorAll('#taskList li');
  
  items.forEach(item => {
    item.addEventListener('dragstart', function() {
      draggedItem = this;
      setTimeout(() => this.classList.add('dragging'), 0);
    });

    item.addEventListener('dragend', function() {
      this.classList.remove('dragging');
    });

    item.addEventListener('dragover', function(e) {
      e.preventDefault();
      this.classList.add('drag-over');
    });

    item.addEventListener('dragleave', function() {
      this.classList.remove('drag-over');
    });

    item.addEventListener('drop', function(e) {
      e.preventDefault();
      this.classList.remove('drag-over');
      
      if (draggedItem !== this) {
        const allItems = document.querySelectorAll('#taskList li');
        const thisIndex = [...allItems].indexOf(this);
        const draggedIndex = [...allItems].indexOf(draggedItem);
        
        if (draggedIndex < thisIndex) {
          this.after(draggedItem);
        } else {
          this.before(draggedItem);
        }
        
        saveTasks();
      }
    });
  });
}

// Вызываем после загрузки задач
loadTasks();
setupDragAndDrop();

4. Обновляем функции save/load:

function saveTasks() {
  const tasks = [];
  document.querySelectorAll('#taskList li').forEach(li => {
    tasks.push({
      text: li.querySelector('span').textContent,
      completed: li.classList.contains('completed'),
      id: Date.now() + Math.random() // Уникальный ID
    });
  });
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

function loadTasks() {
  const savedTasks = localStorage.getItem('tasks');
  if (savedTasks) {
    taskList.innerHTML = '';
    JSON.parse(savedTasks).forEach(task => {
      addTask(task.text, task.completed, task.id);
    });
  }
}

🎯 Что мы получили:
✅ Плавную сортировку перетаскиванием
✅ Визуальные подсказки при перетаскивании
✅ Сохранение порядка между сеансами
✅ Полноценный менеджер задач уровня PRO

💡 Профессиональные лайфхаки:
1. Добавьте ограничение перетаскивания по вертикали:

item.addEventListener('dragover', function(e) {
  e.preventDefault();
  const dragY = e.clientY;
  const rect = this.getBoundingClientRect();
  const middleY = rect.top + rect.height / 2;
  
  if (dragY < middleY) {
    this.classList.add('drag-over-top');
  } else {
    this.classList.remove('drag-over-top');
  }
});

2. Используйте более плавную анимацию:

li {
  transition: transform 0.2s, opacity 0.2s;
}

👉 В следующем уроке:
Превратим наше приложение в PWA (Progressive Web App) с оффлайн-работой!

Подписывайтесь: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими реализациями в комментариях! 💬

#вебразработка #javascript #DragAndDrop #UI #UX

4 views06:01