JavaScript — один из самых популярных языков программирования, поддерживающий более 24 фреймворков и около 84 библиотек. Это единственный язык программирования, изначально поддерживаемый всеми браузерами. Кроме того, язык поддерживает динамическую типизацию и отлично подходит для рендеринга и анимации. Вы можете использовать JavaScript для добавления интерактивного поведения во фронтенде, управления бэкендом, создания веб- и мобильных приложений и многого другого. Возможность добавлять эффекты на любой веб-сайт и делать его настраиваемым делает этот язык фаворитом среди разработчиков по всему миру.
В этом руководстве мы подробно рассмотрим шаги по созданию элементов drag-and-drop с использованием чистого Vanilla JavaScript. Кроме того, мы сделаем еще один шаг вперед и создадим приложение «Morning Scheduler», используя HTML Drag and Drop API обработчики событий.
Предварительные требования
Чтобы следовать этому руководству, вам понадобятся:
Шаг 1. Создание нового проекта
Начните с создания контейнера с двумя дочерними элементами. Мы будем использовать первый дочерний элемент для перетаскивания, а второй — для хранения перетаскиваемых элементов.
|
Примечание: В этом руководстве мы будем рассматривать контейнеры как хранилище для всех перетаскиваемых элементов. Проще говоря, все элементы, перетаскиваемые из первого дочернего элемента, будут сбрасываться во второй. |
|
1 |
$ mkdir drag-and-drop-demo |
Затем используйте команду cd, чтобы перейти в папку drag-and-drop-demo :
|
1 |
$ cd drag-and-drop-demo |
Шаг 2. Начальная настройка
В этом руководстве мы создадим файлы HTML, CSS и JavaScript и свяжем их. Сначала назовите файлы index.html, styles.css, и scripts.js соответственно.
Затем добавьте заголовок «My Morning Planner» в файл index.html :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My Morning Planner</title> </head> <body> </body> </html> |
Затем подключите CSS и добавьте JavaScript в HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> <title>My Morning Planner</title> </head> <body> </body> </html> |
Затем добавьте следующие строки кода в <body> тегах:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> <title>Мой утренний планировщик</title> </head> <body> <div class="container"> <h1><center>МОЙ УТРЕННИЙ ПЛАНИРОВЩИК</center></h1> <h2 class="draggable" draggable="true">Пойти в спортзал</h2> <h2 class="draggable" draggable="true">Почитать 30 минут</h2> <h2 class="draggable" draggable="true">Приготовить овсянку</h2> </div> <div class="container"> <h2 class="draggable" draggable="true">Принять холодный душ</h2> <h2 class="draggable" draggable="true">Начать свой день</h2> </div> </body> </html> |
Сохраните и закройте файл index.html. После этого попробуйте открыть файл index.html в вашем браузере, и вы увидите открывшуюся страницу:
Далее давайте стилизуем наш index.html с помощью CSS, чтобы придать ему презентабельный вид.
Шаг 3. Стилизация с помощью CSS
Затем добавьте стили для всех элементов, которые мы включили в наш файл index.html :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
body { margin: 0; } .container { background-color: #DEB887; padding: 1rem; margin-top: 1rem; } .draggable { padding: 1rem; background-color: #FAF0E6; border: 1px solid #708090; cursor: move; } |
Попробуйте открыть файл index.html в вашем браузере и посмотрите на результат:
Хотя мы завершили структурирование и добавили стили, элементы все еще остаются статичными. Это означает, что мы не можем перемещать или прокручивать элементы, пока не добавим к ним динамические функции. На следующем шаге мы подключим JavaScript и динамическое поведение.
Шаг 4. Знакомство с JavaScript
На этом шаге мы добавим JavaScript и сделаем все перетаскиваемые элементы функциональными. В JS-файле задайте элементы, которые нам понадобятся. Давайте определим draggable и containers для перетаскивания и сброса элементов соответственно.
Добавьте две строки кода в scripts.js файл:
|
1 2 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') |
Затем настройте все слушатели событий. Начните с добавления элемента “dragstart” в качестве первого слушателя событий, чтобы добавить класс. Аналогично, добавьте элемент “dragend” в качестве второго слушателя событий, чтобы удалить класс.
Добавьте следующие EventListeners в ваш scripts.js файл:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') draggables.forEach(draggable => { draggable.addEventListener('dragstart', () => { draggable.classList.add('dragging') }) draggable.addEventListener('dragend', () => { draggable.classList.remove('dragging') }) }) |
Затем добавьте “dragover” EventListener для отслеживания наведения и перемещения наших элементов. Задайте текущий draggable элемент с помощью querySelector и затем добавьте перетаскиваемый элемент в текущий контейнер:
|
1 2 3 4 5 6 |
// … containers.forEach(container => { container.addEventListener('dragover', () => { const draggable = document.querySelector('.dragging') }) }) |
По умолчанию сброс элементов внутрь другого элемента отключен. Используйте e.preventDefault, чтобы включить его:
|
1 2 3 4 5 6 7 8 |
// … containers.forEach(container => { container.addEventListener('dragover', e => { e.preventDefault() const draggable = document.querySelector('.dragging') container.appendChild(draggable) }) }) |
Затем создайте элемент для определения положения мыши. Начните с создания функции getDragAfterElement, которая будет принимать два параметра. Первым будет container, а второй параметр y будет отвечать за вертикальное положение мыши. Теперь используйте функцию querySelectorAll, чтобы получить наши перетаскиваемые элементы. Определите draggableElements для всех перетаскиваемых элементов внутри контейнера:
|
1 2 3 4 |
// … function getDragAfterElement(container, y) { const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')] } |
Затем вызовите функцию reduce, которая переберет список перетаскиваемых элементов, а также определит единственный элемент, находящийся сразу за курсором мыши. Затем верните результат функции reduce, добавив первый элемент как closest и второй как child. Также приравняйте offset и добавьте условия.
Добавьте следующие строки кода в scripts.js файл:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// … 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 } |
Включите это в scripts.js файл:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// … containers.forEach(container => { container.addEventListener('dragover', e =>{ e.preventDefault() const afterElement = getDragAfterElement(container, e.clientY) const draggable = document.querySelector('.dragging') if (afterElement == null) { container.appendChild(draggable) } else { container.insertBefore(draggable, afterElement) } }) }) |
Теперь у нас есть все необходимые настройки. Откройте браузер и запустите index.html в вашем браузере. Вы увидите страницу «My Morning Scheduler» с возможностью перетаскивания. Белая линия посередине служит мостом для разделения уже выполненных задач и тех, которые еще предстоит выполнить:
Заключение
Drag and Drop — отличная функция для использования на современных веб-сайтах. В этом руководстве мы использовали несколько обработчиков событий, чтобы сделать его простым для начинающих. Всего существует восемь обработчиков событий, и мы рекомендуем вам использовать их по мере продвижения. Как только вы освоите функции и код, используемые в этом руководстве, вы сможете глубже погрузиться в такие темы JavaScript, как jQuery и начать изучение. Вы также можете попробовать создать приложение To-Do, трекер еженедельного прогресса с использованием функций даты и времени JavaScript, и другие приложения, используя только что изученные концепции.
Чтобы узнать больше о JavaScript и веб-разработке, ознакомьтесь с этими ресурсами в нашем блоге:
- Инструменты JavaScript: localStorage и sessionStorage
- Работа с JavaScript: Что такое объекты
- Руководство по работе с JSON в JavaScript
- Работа с JavaScript: как работают классы
Приятной работы!
Комментарии
Комментариев пока нет. Будьте первым.