Использование drag and drop на HTML5
16 марта 2020 HTML
Из всех технологий, которые нужно освоить веб-разработчикам, кажется, что та, которая вызывает наибольшую путаницу и потенциальные проблемы, — это drag ‘n’ drop (перетаскивание).
Это не новая технология, она существует уже много лет, но многие разработчики все ещё цепляются за старые методы, основанные на jQuery, для создания сложной (иногда медленной и неточной) эмуляции перетаскивания.
Теперь, когда HTML5 включает API-интерфейс перетаскивания, у вас уже есть очень простой способ реализовать drag ‘n’ drop (перетаскивание) без головной боли.
Содержание
1. Как работает drag and drop
Механику работы drag and drop легко понять. У вас есть объект и цель. Необходимо пользователю позволить нажать на объект и перетащить его к цели, а ваше приложение должно обработать это действие соответствующим образом. Перетаскивать можно все, что угодно: блоки, картинки, ссылки и даже просто текст.
2. Создание шаблона веб-страницы
Для начала создадим самый простой шаблон веб-страницы, в который мы будем добавлять все элементы кода :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>3. Определение перетаскиваемого объекта
Вы, вероятно, ожидаете здесь какого-то сложного JavaScript-кода для определения, но на самом деле все просто, достаточно установить атрибут «draggable» для элемента и все, например:
<div>
<img id="dragMe" src="pic.jpg" draggable="true">
</div>Итак, как вы можете видеть, эта часть действительно очень проста. Фактически, для некоторых браузеров вам даже не нужно указывать атрибут для некоторых типов элементов, но все равно лучше это сделать в любом случае.
Задумали поменять старые окна на новые? Хотите надолго и с оптимальным соотношением цена/качество? Тогда современные деревянные окна со стеклопакетом это правильный выбор. Окна похожи на пластиковые, только изготовлены из натурального дерева. Это модный, экологичный и престижный вариант остекления.
4. Определение цели
Цель — это зона, куда можно перетащить ваш объект. Опять же, это довольно просто, вам просто нужно дать цели атрибут CSS ID.
<div id="drop_target">
Текст
</div>5. CSS-код
Добавьте следующий CSS-код внутри тега <head>:
<style>
#drop_target{border:3px solid #000; padding:10px; height:100px; width:100px;}
#dragMe{height:50px;width:50px;}
</style>6. JS-функции
Этот шаг просто нужен для того, чтобы убедиться, что ваше приложение знает о существовании объектов и что оно должно взаимодействовать с ними. Вы можете использовать сложный подход, если вам это нужно, и создать серию слушателей событий, но вам не нужно придумывать ничего сложного, чтобы справиться с простым перетаскиванием.
На самом деле нам просто нужно определить две функции, которые будут обрабатывать все перемещения, dragObject и dropObject.
<script>
var moved=false;
function dragObject(e){
e.dataTransfer.effectAllowed="move";
e.dataTransfer.setData("obj1", e.target.id);
return false;
}
function dropObject(e){
if(moved==true){
return false;
}
var received=e.dataTransfer.getData("obj1");
e.dataTransfer.dropEffect="move";
e.preventDefault();
e.stopPropagation();
e.target.appendChild(document.getElementById(received));
moved=true;
return false;
}
</script>Здесь мы отменяем действия браузера по умолчанию, например переход по ссылке и т.д., а так же предотвращаем выполнение кода после того, как действие уже было выполнено.
7. Добавляем вызов функций
Ничего не произойдет, если функции не будут вызваны. Поэтому добавляем вызов функций. Вам нужно просто изменить объявления объекта и цели вот так:
<img id="dragMe" src="pic.jpg" draggable="true" ondragstart="dragObject(event);">
и
<div id="drop_target" ondragover="event.preventDefault();" ondrop="dropObject(event);">
Как сделать кнопку назад на сайте? Самый простой вариант это с помощью JavaScript-функции history. С ней можно переходить вперед, назад, обновлять страницу и делать переход на две и более страницы сразу. Кнопка назад Как ссылка: <a onclick="javascript:history.back(); return false;">Назад</a> Как Читать далее
Чтобы при вводе даты в input выпадал удобный календарик можно воспользоваться двумя способами: стандартным полем HTML5 type="date" или JavaScript библиотекой Bootstrap Datepicker. Рассмотрим подробнее эти способы в этой статье. Календарь для input HTML5 Просто применяем у input атрибут type="date" или Читать далее
Стоп-форма - это всплывающее окно, призывающее к действию, которое открывается через определенное время нахождения пользователя на странице или когда он пытается покинуть её. Чаще всего стоп-формы используются на Landing page. Стоп-форма по таймеру Рассмотрим пример вплывающего окна с формой на Читать далее
В статье приведена наиболее полная таблица кодов специальных символов HTML и символы юникода (unicode), которые можно использовать для своих проектов и в социальных сетях. Коды специальных символов HTML Чтобы клавиатура была удобной в использовании, она должна быть достаточно компактной. Однако Читать далее
С появлением HTML спецификации Media Capture стало возможным получать медиаданные с камеры пользователя так же, как если бы он загрузил на сайт какой-то файл с помощью элемента <input type="file"/>. Media Capture переопределяет поле для отправки файла если к нему добавить Читать далее
Введение спецификации HTML5 принесло с собой множество новых семантических тегов, которые придают ещё больше смысла тегам HTML. Это означает, что теперь веб-разработчикам нужно меньше придумывать и создавать осмысленные типы тегов для построения структуры своего сайта. Основные семантические теги HTML, такие Читать далее
Создание прилипающего футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью Flexbox. Без прилипающего футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. Читать далее
Добавить комментарий