Drag and drop w html5
Na pewno spotkałeś się już z tym pojęciem w internecie. Drag and drop (przeciągnij i upuść) polega na możliwości przeciągania i upuszczania jednych elementów na drugie np. divów, obrazków itp. Do tej pory w celu zaimplementowania tej funkcjonalności na stronie www trzeba było samemu pisać od zera lub skorzystać z widżetów np. z biblioteki jQuery. W html5 wprowadzono api implementujące tą funkcjonalność. Dzięki wprowadzeniu kilku zdarzeń możemy dodać obsługę drag nad drop bardzo prosto. Wprowadzono między innymi następujące zdarzenia służące do obsługi przeciągania i upuszczania:
- ondrag – uruchamiane wtedy gdy element jest przeciągany,
- ondragend – w momencie zakończenia przeciągania,
- ondrop – w momencie kiedy element jest upuszczany,
- ondragstart – w momencie rozpoczęcia przeciągania,
- ondragover – w momencie kiedy element zostanie przeciągnięty nad prawidłowy element docelowy.
<html>
<head>
<meta charset="utf-8">
<title>Drag and drop</title>
<script src="jquery-1.11.1.min.js"></script>
<style>
#drag {
width:100px;
height:100px;
background: green;
float:left;
margin:20px;
}
#drop {
width:200px;
height:200px;
background: blue;
float:left;
margin:20px;
}
</style>
<script src="drag-drop.js"></script>
</head>
<body>
<div id="drag" draggable="true">
</div>
<div id="drop">
</div>
</body>
</html>
Ważną rzeczą jest ustawienie atrybutu draggable na true dla elementu, który będziemy przeciągać.
Kod pliku drag-drop.js poniżej.
$(document).ready(function() {
$('#drop').on('dragover', function(e) {
e.preventDefault();
});
$('#drop').on('drop', function(e) {
e.preventDefault();
var data = e.originalEvent.dataTransfer.getData("text/html");
$(e.target).html($('#'+data));
});
$('#drag').on('dragstart', function(e) {
e.originalEvent.dataTransfer.setData("text/html", e.target.id);
});
});
Omówię pokrótce powyższy kod. Określamy co się stanie gdy element jest przeciągany. W momencie rozpoczęcia przeciągania (dragstart)
metodą dataTransfer.setData ustawiamy typ danych i wartość przeciąganych danych. W naszym przypadku, typ danych to text/html a wartością
jest identyfikator przeciąganego elementu. Zdarzenie dragover określa, gdzie przeciągane dane mogą być upuszczone. Domyślnie dane (elementy) nie
mogą być upuszczane na inne elementy. Aby temu zapobiec wywołujemy e.preventDefault. Na koniec należy obsłużyć zdarzenie drop wywoływane w momencie
upuszczania elementu. Najpierw wywołujemy e.preventDefault aby zapobiec domyślnemu działaniu, którym jest otwarcie jako link. Następnie pobieramy dane
metodą e.originalEvent.dataTransfer.getData. Są to dane, które ustawialiśmy wcześniej metodą setData. Używamy tutaj zapisu e.originalEvent, ponieważ
używamy tutaj jQuery, a chcemy odwołać się do metod oryginalnego zdarzenia. Na koniec za pomocą jQuery wstawiamy przeciągany kwadrat wewnątrz drugiego.
Drag and drop demo