etxt banner 468x60etxt banner 728x90etxt banner 930x180beget banner 468x60beget banner 728x90beget banner 930x180skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180

Функция перетаскивания (drag and drop) в HTML5 позволяет пользователю перетаскивать элемент с места на место. При перетаскивании элемента он выделяется полупрозрачным цветом и следует за указателем мыши.

Посмотрим следующий пример, чтобы понять, как это работает:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Использование Drag and Drop</title>
<script>
    function dragStart(e) {
        // Устанавливаем разрешение для перетаскивания
        e.dataTransfer.effectAllowed = "move";
    
        // Устанавливаем значение и тип перетаскиваемых данных
        e.dataTransfer.setData("Text", e.target.getAttribute("id"));
    }
    function dragOver(e) {
        // Запрещаем браузеру обработку данных по умолчанию
        e.preventDefault();
        e.stopPropagation();
    }
    function drop(e) {
        // Отменяем это событие для всех остальных
        e.stopPropagation();
        e.preventDefault();
    
        // Получаем перетаскиваемые данные по типу
        var data = e.dataTransfer.getData("Text");
    
        // Добавляем изображение в выпадающий список
        e.target.appendChild(document.getElementById(data));
    }
</script>
<style> #dropBox { width: 300px; height: 300px; border: 5px dashed gray; background: lightyellow; text-align: center; margin: 20px 0; color: orange; } #dropBox img { margin: 25px; }
</style>
</head><body> <h2>Drag and Drop Demo</h2> <p>Перетащите изображение в выпадающее окно:</p> <div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);"> <!--Изображение будет вставлено сюда--> </div> <img src="../images/kites.jpg" id="dragA" draggable="true" ondragstart="dragStart(event);" width="250" height="250" alt="Flying Kites"></body></html>

Вы можете сделать элемент перетаскиваемым, установив атрибут draggable в значение true, например, draggable="true". Однако в большинстве веб-браузеров выбор текста, изображений и элементов с атрибутом href по умолчанию можно перетаскивать.

Drag и Drop события

На различных этапах операции перетаскивания запускается ряд событий. Но такие события мыши, как mousemove, не запускаются во время операции перетаскивания.

В следующей таблице представлен краткий обзор всех событий перетаскивания.

СобытиеОписание
ondragstartЗапускается, когда пользователь начинает перетаскивать элемент.
ondragenterЗапускается, когда перетаскиваемый элемент впервые перемещается в контейнер отбрасывания.
ondragoverЗапускается, когда пользователь перетаскивает элемент поверх контейнера отбрасывания.
ondreagleaveЗапускается, когда пользователь перетаскивает элемент из контейнера.
ondragЗапускается, когда пользователь перетаскивает элемент куда-либо; срабатывает постоянно, но может давать координаты X и Y курсора мыши.
ondropВызывается, когда пользователь успешно помещает элемент в контейнер.
ondragendЗапускается, когда действие перетаскивания завершено, независимо от того, было оно успешным или нет. Это событие не вызывается при перетаскивании файла в браузер с рабочего стола.

Функция перетаскивания в HTML5 доступна во всех основных браузерах, таких как Firefox, Chrome, Opera, Safari и Internet Explorer 9 и выше.

jivo banner 480x320jivo banner 728x90jivo banner 120x600etxt banner 480x320etxt banner 728x90etxt banner 120x600skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по тегам и элементам в HTML

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…

Руководство по мета-тегам в HTML

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…