Ознакомьтесь с нашими Внутренними тренингами по Angular или общедоступными курсами по Angular.
Попробуйте fossilo.com, наш угловой проект для архивации целых веб-сайтов.

Что мы будем делать сегодня:

  • установить компонент ng2-dragula с помощью npm в проекте Angular4
  • импортировать его в модуль приложения и внедрить в компонент приложения
  • отобразить список задач и поиграть с ними

Установите ng2-dragula в свое приложение Angular4

Войдите в свой проект и выполните следующую команду с npm:

npm install ng2-dragula --save

Импорт и реализация компонента ng2-dragula

В своем модуле приложения импортируйте модуль ng2-dragula и добавьте его в импорт NgModule следующим образом:

Затем в компоненте приложения установите параметры компонента ng2-dragula, если они вам нужны.

Это можно сделать двумя способами:

1. Настройте свойство options как любое и установите его с помощью желаемой опции ng2-dragula, например removeOnSpill, revertOnSpill, copy…:

2. Импортируйте dragulaService и вставьте его в конструктор компонента приложения. Затем в конструкторе вызовите службу, чтобы получить метод setOptions. Вам необходимо указать имя и параметры перетаскивания:

Вы можете найти все варианты в официальной документации драгулы.

Отображать

В вашем шаблоне html у вас также есть 2 способа отобразить список перетаскивания:

1. Либо создайте 2 списка, встроенных в 2 разных контейнера. Добавьте директиву [dragula], она позволяет группировать контейнеры вместе и называется «мешок». Также установите свои параметры, привязав к атрибуту [dragulaOptions].

2. Или в контейнере div добавьте параметр [dragula] ( но не [dragulaOptions]) и задайте имя выбранного вами параметра (определенного в компоненте приложения ):

CSS для используемых здесь классов можно найти в файле example.css пакета dragula в репозитории Github. Вы также можете перезаписать CSS, чтобы настроить перетаскивание по своему желанию!

Взгляните на свой перетаскиваемый список, запустив локальный сервер (убедитесь, что вы находитесь в репозитории своего проекта):

ng serve -o

Теперь вы можете перетаскивать все, что хотите, вы даже можете удалять и копировать некоторые элементы!

Спасибо @valorkin и @walkerrunpdx за этот забавный компонент npm!

Увидимся в следующий раз, чтобы увидеть еще одну статью об Angular4! Подпишитесь на меня в Twitter, LinkedIn или Medium и взгляните на нашу серию статей Medium!