Proud to be an engineer !: [HTML|JS|CSS] HTML5: Drag and drop

Jedną z nowości, jakie wprowadza standard HTML5 jest API do drag and drop. Dzięki niemu użytkownik może w obrębie okna przeglądarki przesuwać elementy. Programista dostaje z kolei kilka atrybutów, które może wykorzystać jako callbacki oprogramowane w JavaScript. Wspomniane atrybuty to:

draggable
ondragenter
ondragover
ondrop
ondragstart
ondragend

Pierwszy z nich ustawia się na true na pewnym elemencie DOM, jeśli chcemy zezwolić użytkownikowi na przesuwanie tego elementu. Pozostałe służą do powiązania z nimi odpowiednich funkcji JS. Atrybuty ondragenter oraz ondragover oraz ondrop służą do przechwytywania zdarzeń elementu, nad którym ma mieć miejsce przeciąganie, dwa ostatnie dotyczą samego elementu przeciąganego.

Ostatnim ważnym obiektem jest dataTransfer. Dostęp do niego mamy poprzez zdarzenia związane z drag and drop. Możemy w nim przechowywać dane za pomocą funkcji setData, getData, clearData. W property o nazwie effectAllowed programista może ustawić na jaki efekt zezwala użytkownikowi:

move - przeniesienie elementu
copy - skopiowanie elementu w miejscu, w którym nastąpi drop
link - podlinkowanie elementu poprzez data transfer

Poniżej obszerny przykład, jak napisać prosty mechanizm drag and drop w HTML5.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Drag and drop</title>
<script type="text/javascript" src="script.js"></script>
<style>
 #target1, #target2, #target3{
  float: left; 
  width: 250px; 
  height: 250px;
  padding: 10px;
  margin: 10px;
  background-color: cyan;
 }
 #draggable1, #draggable2, #draggable3{
  width: 75px;
  height: 70px;
  padding: 5px;
  margin: 5px;
  background-color: orange;  
 } 
</style>
</head>
<body>
 <h1>Drag and drop example</h1>
 <div id="target1"
  ondragenter="return enter(event)"
  ondragover="return over(event)"
  ondrop="return drop(event)">
  <div id="draggable1" draggable="true"
   ondragstart="return start(event)"
   ondragstop="return stop">1</div>
  <div id="draggable1" draggable="true"
   ondragstart="return start(event)"
   ondragstop="return stop">2</div>
  <div id="draggable1" draggable="true"
   ondragstart="return start(event)"
   ondragstop="return stop">3</div> 
 </div>
 <div id="target2"
  ondragenter="return enter(event)"
  ondragover="return over(event)"
  ondrop="return drop(event)">
 </div>
 <div id="target3"
  ondragenter="return enter(event)"
  ondragover="return over(event)"
  ondrop="return drop(event)">
 </div>
</body>
</html>

Część skryptowa:
1. start przy rozpoczęciu przemieszczania elementu, określany jest dozwolony rodzaj ruchu oraz przechowywane jest jego id.

function start(e){
 e.dataTransfer.effectAllowed = 'move';
 e.dataTransfer.setData("Data", e.target.getAttribute('id'));
 return true;
}

2. enter- pozwala draggowalnym obiektom przemieszczać się na targetami

function enter(e){
 return true;
}

3. over - funkcja ta decyduje o tym, czy dany element może zostać opuszczony nad konkretnym kontenerem

function over(e){
 var dragid = e.dataTransfer.getData("Data");
 var id = e.target.getAttribute('id');
 if(id == "target3" && dragid == "draggable3"){
  return true;
 }
 if(id == "target2" && dragid == "draggable2"){
  return true;
 }
 return false;
}

4. drop - co ma się stać z elementem po opuszczeniu go przez użytkownika

function drop(e){
 var id = e.dataTransfer.getData("Data");
 e.target.appendChild(document.getElementById(id));
 e.stopPropagation();
 return false;
}

5. end - zakończenie drag and drop, czyszczenie dataTransfer

function end(e){
 e.dataTransfer.clearData("Data");
 return false;
}

poniedziałek, 22 października 2012

[HTML|JS|CSS] HTML5: Drag and drop

Brak komentarzy:

Prześlij komentarz

Szukaj na tym blogu