Skip to content

Trello. Доска задач, состоящая из 3-х колонок с карточками задач, с возможностью перемещения карточек как внутри колонки , так и между колонками.

Notifications You must be signed in to change notification settings

Sergius92739/ahj-6.1-DnD

Repository files navigation

Build status

Правила сдачи задания:

  1. Важно: в рамках этого ДЗ нужно использовать yarn (поэтому файла package-lock.json в репозитории быть не должно)
  2. Всё должно собираться через Webpack (включая картинки и стили) и выкладываться на Github Pages через Appveyor
  3. В README.md должен быть размещён бейджик сборки и ссылка на Github Pages
  4. В качестве результата присылайте проверяющему ссылки на ваши GitHub-проекты
  5. Авто-тесты писать не требуется

Trello

Легенда

Вы делаете внутрикорпоративную систему управления задачами и вашему руководству очень нравится подход, который используется в Trello:

Описание

Фактически у вас есть доска, состоящая из колонок, в каждой колонке может быть несколько карточек.

Для упрощения сделаем следующие допущения:

  1. Кол-во колонок фиксировано и равно 3
  2. Новые колонки добавлять нельзя, удалять имеющиеся тоже
  3. Перемещать колонки тоже нельзя

Что же можно:

  1. Добавлять карточки с помощью кнопки 'Add another card'. Вот так это выглядит:

  1. Удалять карточки - при наведении на карточку появляется иконка крестик ("\E951"), которая и удаляет карточку (обратите внимание в оригинальном Trello такой операции нет, есть только архивация, но мы для упрощения её ввели):

  1. Перемещать карточки как внутри колонки, так и между колонками:
Процесс перемещения
  1. Внешний вид до переноса (карточка находится на своём месте):

  1. Внешний вид в момент переноса (карточка удаляется из своего начального положения):

Обратите внимание на следующие нюансы:

  1. Внешний вид курсора ('grabbing')
  2. Курсор по отношению к карточке остаётся там, где изначально схватили - не привязывается ни к левому краю, ни к центру, а там, где схватили карточку, т.е. можно схватить за нижний левый угол:

  1. При наведении на другие позиции под карточку выделяется место по высоте равное размеру самой карточке, при это будет карточка ставится "до" или "после" элемента определяется исключительно позицией курсора:

Дополнительно

Дополнительные требования:

  1. Храните всё состояние в LocalStorage так, чтобы после обновления страницы внесённые изменения сохранялись
  2. Постоение DOM-дерева производите на базе состояния, хранящегося в LocalStorage
Упрощения

В целях упрощения сделайте только:

  1. Возможность хранить текст (картинки, списки, цветовое оформление элементов не нужно)
  2. Перемещение самой карточки (поворот делать не нужно)
  3. Можете также не обрабатывать ситуацию, связанную с выносом элемента за пределы доски

About

Trello. Доска задач, состоящая из 3-х колонок с карточками задач, с возможностью перемещения карточек как внутри колонки , так и между колонками.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published