Blog

You are currently viewing Drag and drop API

Drag and drop API

Στο άρθρο αυτό θα παρουσιάσουμε την Drag and Drop API της HTML5. Μας επιτρέπει να επιλέξουμε ένα αντικείμενο και να το σύρουμε σε μια ορισμένη περιοχή.

Δείτε το παρακάτω παράδειγμα στο οποίο μπορούμε να σύρουμε τις εικόνες στο κουτί με το κόκκινο πλαίσιο:

See the Pen Drag and drop with images. by WebFocus (@athinats) on CodePen.

Η ιδιότητα draggable

Για να μπορέσουμε να σύρουμε ένα στοιχείο HTML χρειάζεται να προσθέσουμε την ιδιότητα (attribute) draggable=”true”. Η ιδιότητα draggable έχει 3 πιθανές τιμές:
– true, που δηλώνει ότι το στοιχείο μπορεί να συρθεί με το ποντίκι
– false, που δηλώνει ότι το στοιχείο δεν μπορεί να συρθεί
– auto, που δηλώνει ότι το στοιχείο μπορεί να συρθεί ή όχι και εξαρτάται από τον browser που χρησιμοποιεί το χρήστης.

Να συμπληρώσουμε ότι στους περισσότερους browsers ορισμένα στοιχεία είναι draggable από προεπιλογή και δε χρειάζεται να προσθέσουμε την ιδιότητα draggable=”true”. Τέτοια στοιχεία είναι οι εικόνες (<img>), τα link (<a>) και η επιλογή κειμένου.

Drag and drop events

Για τα στοιχεία που επιλέγουμε να σύρουμε υπάρχουν τα εξής events που λαμβάνουν χώρα:
– dragstart: ενεργοποιείται όταν ο χρήστης ξεκινά να σύρει ένα στοιχείο
– drag: ενεργοποιείται όταν το στοιχείο μετακινείται
– dragend: ενεργοποιείται όταν ολοκληρωθεί η drag and drop διαδικασία.

Για τα στοιχεία (drop zones) που δέχονται ένα draggable στοιχείο τα events που λαμβάνουν χώρα είναι:
– dragenter: ενεργοποιείται μόλις το στοιχείο που σύρεται βρεθεί πάνω στη drop zone
– dragleave: ενεργοποιείται όταν το στοιχείο που σύρεται βγει εκτός drop zone
– dragover: ενεργοποιείται όταν το στοιχείο που σύρεται κινείται μέσα στη drop zone
– drop: ενεργοποιείται όταν το στοιχείο που σύρεται αφεθεί μέσα στη drop zone.

Δείτε το παρακάτω παράδειγμα στο CodePen. Στη συνέχεια θα εξηγήσουμε κομμάτι-κομμάτι τον κώδικα που χρησιμοποιείται σε αυτό.

See the Pen Drag ‘n drop list items by WebFocus (@athinats) on CodePen.


<ol ondragstart="dragStartHandler(event)">
   <li draggable="true" data-value="social-facebook">Facebook</li>
   <li draggable="true" data-value="social-twitter">Twitter</li>
   <li draggable="true" data-value="social-instagram">Instagram</li>
</ol>

Αρχικά για να μπορούμε να σύρουμε κάθε ένα από τα <li> προσθέτουμε την ιδιότητα draggable=”true”. Για να ενεργοποιηθεί το dragstart event χρησιμοποιείται ο handler ondragstart. Γράφοντας <ol ondragstart=”dragStarthandler(event)”> κάθε αντικείμενο της λίστας θα ενεργοποιεί το event.

Χρησιμοποιώντας τον handler ondragstart

Και περνάμε τώρα στη συνάρτηση dragStarthandler(event).

function dragStartHandler(event) {
  event.dataTransfer.setData("Socials", event.target.dataset.value);
}

Για το στοιχείο <li> που σύρεται κάθε φορά από τον χρήστη, χρειάζεται να πάρουμε την τιμή της ιδιότητας data-value και να την αντιγράψουμε στο “drag and drop clipboard” για μελλοντική χρήση. Αυτό το επιτυγχάνουμε  με το event.dataTransfer.setData(). Στην τιμή αυτή πρέπει να δώσουμε ένα όνομα. Τα δεδομένα που αντιγράφονται στο clipboard θα συσχετίζονται με αυτό το όνομα (στο παράδειγμά μας είναι “Socials”).

Στη συνάρτηση dragStartHandler που φαίνεται παραπάνω, η μεταβλητή event.target αναφέρεται στο στοιχείο <li> που σύρεται και event.target.dataset.value είναι η τιμή της ιδιότητας data-value αυτού του στοιχείου.

Καθορίζοντας μια “drop zone”

<div ondragover="return false" ondrop="dropHandler(event);">
   Drag and drop your favorite socials below:
   <ol id="dropArea"></ol>
</div>

Κάθε στοιχείο HTML μπορεί να αποτελέσει μια drop zone αρκεί να προσθέσουμε σε αυτό τον handler ondrop.

Χρησιμοποιώντας τον handler ondrop

function dropHandler(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("Socials");
  var li = document.createElement('li');
  if (data == 'social-facebook') {
    li.textContent = 'Facebook';
  } else if (data == 'social-twitter') {
    li.textContent = 'Twitter';
  } else if (data == 'social-instagram') {
    li.textContent = 'Instagram';
  } else {
    li.textContent = 'Unknown';
  }
  document.querySelector("#dropArea").appendChild(li);
}

Όταν το στοιχείο που σύρεται αφήνεται μέσα στην περιοχή που έχουμε ορίσει σαν “drop zone”, καλείται η συνάρτηση dropHandler που βλέπουμε εδώ. Στη γραμμή 3 γράφοντας event.dataTransfer.getData() παίρνουμε από το clipboard το αντικείμενο με το όνομα “Socials”. Στη γραμμή 4 δημιουργούμε ένα νέο στοιχείο <li> και στη συνέχεια του δίνουμε την ίδια τιμή με αυτή που διαβάζεται από το clipboard. Τέλος προσθέτουμε το νέο στοιχείο <li> στη λίστα με id=”dropArea”.

Χρησιμοποιώντας τον handler ondragover

function dragoverHandler(event) {
   event.preventDefault();
}

Όπως μπορεί να παρατηρήσατε πιο πάνω, στην drop zone χρησιμοποιούμε επίσης τον handler ondragover. Η συνάρτηση dragoverHandler καλεί τη μέθοδο preventDefault() η οποία ακυρώνει την προεπιλεγμένη συμπεριφορά του browser (αν για παράδειγμα το στοιχείο που πέφτει μέσα στην drop zone είναι μια εικόνα, η προεπιλεγμένη συμπεριφορά του browser είναι να ανοίξει την εικόνα σε μια νέα καρτέλα κλπ).

 

Για περισσότερες λεπτομέρειες προτείνουμε τα παρακάτω:

 

Tags: , ,