Использование 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);">
Экспортировать HTML-страницу как документ Microsoft Word можно различными способами. Существуют PHP-библиотеки, плагины jQuery. Но когда HTML-файл прост без какой-либо сложной разметки, тогда можно экспортировать HTML-содержимое в формат .doc без особых усилий. Мне даже не нужны сторонние библиотеки. Если вы хотите Читать далее
Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность Читать далее
Создание прилипающего футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью Flexbox. Без прилипающего футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. Читать далее
Введение спецификации HTML5 принесло с собой множество новых семантических тегов, которые придают ещё больше смысла тегам HTML. Это означает, что теперь веб-разработчикам нужно меньше придумывать и создавать осмысленные типы тегов для построения структуры своего сайта. Основные семантические теги HTML, такие Читать далее
С появлением HTML спецификации Media Capture стало возможным получать медиаданные с камеры пользователя так же, как если бы он загрузил на сайт какой-то файл с помощью элемента <input type="file"/>. Media Capture переопределяет поле для отправки файла если к нему добавить Читать далее
В статье приведена наиболее полная таблица кодов специальных символов HTML и символы юникода (unicode), которые можно использовать для своих проектов и в социальных сетях. Коды специальных символов HTML Чтобы клавиатура была удобной в использовании, она должна быть достаточно компактной. Однако Читать далее
Добавить комментарий