Функция перетаскивания (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 и выше.

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

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

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

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

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

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

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

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

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

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

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