Drag & Drop

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

В теорию вдаваться не будем. Все будет видно из примера. Задача: у нас есть 3 квадрата в первом контейнере, и нам нужно реализовать возможность перетаскивания этих квадратов во второй контейнер. Разметка будет такой.

Для начала сделаем квадраты перетягиваемыми. А именно, установим аттрибут «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 вызывается, когда мы отпускаем левую клавишу мыши. В этом событии мы перемещаем соответствующий квадрат во второй контейнер.