РЕКЛАМА
Drag & Drop
1 октября 2011 HTML5 4 комментария 861 просмотр
Возможность Drag & Drop в браузерах была уже давно реализована средствами Javascript. Сейчас же можно сделать Drag & Drop без сторонних библиотек (jQuery UI), а при помощи нативных возможностей браузера. Под катом я расскажу как это делается.

В теорию вдаваться не будем. Все будет видно из примера. Задача: у нас есть 3 квадрата в первом контейнере, и нам нужно реализовать возможность перетаскивания этих квадратов во второй контейнер. Разметка будет такой.
<div id="wrapper1">
    <div class="square" id="square1">1</div>
    <div class="square" id="square2">2</div>
    <div class="square" id="square3">3</div>
</div>
<div id="wrapper2">
</div>
Для начала сделаем квадраты перетягиваемыми. А именно, установим аттрибут "draggable=true", назначим обработчик события "dragstart" и сохраним данные о перетаскиваемом объекте.
$('.square')
    .attr('draggable', 'true')
    .bind('dragstart', function(event) {
        event.originalEvent.dataTransfer.setData('text/plain', $(this).attr('id'));
        return true;
    });
Займемся вторым контейнером. Научим его принимать объекты, изменять свой стиль при получении объектов. Для этого определим такие события как "dragenter", "dragleave", "dragover" и "drop". Первые 3 должны возвращать "false" для блокировки стандартного поведения браузера.
$('#wrapper2')
    .bind('dragenter', function(event) {
        $(this).addClass('hover');
        return false;
    })
    .bind('dragleave', function(event) {
        $(this).removeClass('hover');
        return false;
    })
    .bind('dragover', function() {
        return false;
    })
    .bind('drop', function(event) {
        $(this).removeClass('hover');
        var id = event.originalEvent.dataTransfer.getData('text/plain');
        $(this).append($('#' + id));
        if (event.preventDefault) {
            event.preventDefault();
        }
    });
});
В обработчиках событий dragenter и dragleave выполняется установка и снятие CSS класса, который подсвечивает контейнер, когда над ним находится перетаскиваемый квадрат. Событие drop вызывается, когда мы отпускаем левую клавишу мыши. В этом событии мы перемещаем соответствующий квадрат во второй контейнер.

Демо


4 комментария
куь

Че за наебалово? Это как понимать "Сейчас же можно сделать Drag & Drop без сторонних библиотек (jQuery UI), а при помощи нативных возможностей браузера. Под катом я расскажу как это делается. " ?.

Куь, я не совсем понял ваш вопрос. Да, в статье D&D реализован чистым JS. При помощи встроенных событий dragenter, leave..., при помощи свойства dataTransfer.

куь

Взгляните на это: http://www.w3schools.com/html/html5_draganddrop.asp Это чистый JS, а не 100 лишних КБ JQ в странице.

В моем примере jQuery использовался лишь для того, чтобы упростить читабельность кода. Конечно, всё это можно заменить на getElementById и т.д. Но суть не в этом же.