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

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

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

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

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