Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

HTML Drag-and-drop

Здравствуйте дорогие друзья и сегодня мы рассмотрим перетаскивания элементов в html5 или Drag-and-drop.

Если скопировать первое попавшиеся определение данной технологии, то оно будет примерно такое:

Drag-and-drop - способ оперирования элементами интерфейса в интерфейсах пользователя (как графическим, так и текстовым, где элементы GUI реализованы при помощи псевдографики) при помощи манипулятора «мышь» или сенсорного экрана. Может немного запутано не так ли? Генерируя пример лишь скажу, что с данной технологией мы все отлично знакомы. Пример перетаскивание файла в папку с помощью мыши или товара в корзину в интернет магазине. Именно перетаскивание и помещения какого либо элемента в другой и называют Drag-and-drop.

Ну хватит теории давайте займемся практикой.

Давайте сделаем блок в который мы будем перетаскивать определенный текст.

Допустим у нас есть следующий код:

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            Drag-and-drop
        </title>
    </head>
    <body>
    <style>
        #el{
            width:200px;
            float:left;
        }
        #block{
            width:500px;
            height:500px;
            float:right;
            border:1px solid #000;
            position:relative;
        }
        #block span{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%);
        }
    </style>
        <p id="el" >
            Перетаскиваемый элемент
        </p>
        <div id="block" >
            <span>Добавляем сюда элементы</span>
        </div>

    </body>
</html>

Первое что мы должны сделать, так это задать элементу который мы будем перетаскивать атрибут draggable со значением true.

<p id="el" draggable="true" >
    Перетаскиваемый элемент
</p>

Теперь когда мы зажмем кнопку мыши и попытаемся перенести элемент у нас при переносе будет изменен курсор.

Далее мы должны рассмотреть события которые отслеживаются при перемещении и добавлении элемента в Drag-and-drop:

dragStart - начало перетаскивания элемента.

dragEnter - перетаскиваемый элемент достигает конечного элемента.

dragOver - курсор мыши наведен на элемент при перетаскивании.

dragLeave - курсор мыши покидает пределы перетаскиваемого элемента.

drag - курсор двигается при перетаскивании.

drop - происходит помещение одного элемента в другой .

dragEnd - пользователь отпускает курсор мыши в процессе перетаскивания.

Теперь мы должны из этих событий построить последовательность наших действий.

Во первый, мы обратимся к событию dragStart которое срабатывает при попытке перетаскивания элемента.

document.querySelector('#el').addEventListener('dragstart' , function(event){

    /* Срабатывает когда эламент начал перемещаться. */
    event.dataTransfer.effectAllowed='move';
    event.dataTransfer.setData("par", event.target.getAttribute('id'));
    var center_height = event.target.clientHeight / 2, //Центр по высоте
        center_width = event.target.clientWidth / 2; //Центр по ширине
    event.dataTransfer.setDragImage(event.target,center_width,center_height);

 
});

Смотрим что и удивляемся что я тут нагородил:

event.dataTransfer.effectAllowed - тип доступного действия в нашем случае это move(перемещение) , есть и еще : none, copy, copyLink, copyMove, link, linkMove, all или uninitialized.

event.dataTransfer.setData - Записываем данные в специальное хранилище и даем идентификатор par. В качестве данных у нас название идентификатора перетаскиваемого элемента. Кстати кто не знает, то event - это объект события(элемент с id="el"), а свойство target позволяет обращаться к нему как к элементу.

event.target.clientHeight / 2 - находим середину элемента по высоте

event.target.clientWidth / 2 - находим середину элемента по ширине

event.dataTransfer.setDragImage(event.target,center_width,center_height); - здесь мы задаем нашему изображению, которое появляется при перетаскивании элемента, позицию курсора по отношению к нему. То есть когда мы перетаскиваем элемент у нас появляется дубликат нашего элемента в виде изображения и в нашем случае курсор на этом изображении установлен примерно по центру как мы и задумали.

Едем дальше, теперь поработаем с принимающим элементом id="block", для него сразу зададим два события:

/* перетаскиваемый элемент достигает конечного элемента */ Скопировать в буфер
document.querySelector('#block').addEventListener('dragenter' , function(event){
    event.preventDefault();
    return true;
});
/* курсор мыши наведен на элемент при перетаскивании */
document.querySelector('#block').addEventListener('dragover' , function(event){
    event.preventDefault();
});

теперь прошу обратить внимания на то как меняется курсор, когда перетаскиваемый элемент находится над блоком в который мы хотим его поместить. Это реализовано благодаря предыдущим действиям.

И нас по сути остается последний штрих это помещение одного элемента в другой, для мы используем событие drop(Помещение):

document.querySelector('#block').addEventListener('drop' , function(event){
    var data = event.dataTransfer.getData("par");
    event.target.appendChild(document.getElementById(data));
    event.stopPropagation();
    
});

event.dataTransfer.getData("par") - Считываем название идентификатора перемещаемого элемента из хранилища ранее созданного параметра par.

event.target.appendChild(document.getElementById(data)) - помещаем или добавляем в перетаскиваемый элемент в блок.

event stopPropagation останавливает "всплытие" вызова события к родительским элементам.

Ну вот и все дорогие друзья, следует отметить что это еще далеко не все на что способна данная технология например с помощью нее можно делать ползунки, скролы и многое , многое другое.

А на этом я с вами прощаюсь, удачи!

Оцените статью

Еще статьи

Ссылки html

Генерация строк php

User select css

Строки шаблонов javascript

отступ текста css

FileSystem api

css zoom

Комментарии

Проверочный код

В данном разделе пока нет комментариев!

История

    ПОДПИСКА

    • Подпишись и получай информацию о выходе новых статей на почту! Просто введите свою почту, нажмите кнопку подписаться. На почту должно будет прийти сообщение с потверждением подписки. Если сообщение не пришло проверьте раздел спам или попробуйте другую почту. Также по всем техническим проблемам вы можете написать в поддержку

    НОВОСТИ

    • Всем привет! Запустил новый сервис для поиска и бесплатного скачивания, прослушивания аудиокниг. Здесь вы можете найти множество литературы и прослушать ее. Вскоре возобновлю написание статей.