Δραστηριότητες HTML5

Παρακαλώ τραβήξτε την εικόνα του CodeW3C.com στον κύριο πλαίσιο.

Μεταφορά και απόθεση

Η μεταφορά και απόθεση (Drag και Drop) είναι μια συχνή λειτουργία. Αναφέρεται στην κίνηση ενός αντικειμένου και την απόθεσή του σε διαφορετική θέση.

Η μεταφορά και απόθεση είναι μέρος του стандарτού HTML5: οποιοδήποτε στοιχείο είναι μεταφερόμενο.

Υποστήριξη προγράμματος περιήγησης

Τα αριθμήματα στη τάβλη επιδεικνύουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως τη μεταφορά και απόθεση.

API
Μεταφορά και απόθεση 4.0 9.0 3.5 6.0 12.0

Παράδειγμα HTML μεταφοράς και απόθεσης

Ακολουθεί ένα απλό παράδειγμα για την μεταφορά και απόθεση:

Παράδειγμα

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>

Δοκιμάστε Εξ ολοκλήρου

Μπορεί να φαίνεται λίγο περίπλοκο, αλλά ας εξετάσουμε όλα τα διαφορετικά μέρη του συμβάντος μεταφοράς.

Ρύθμιση στοιχείου σε μεταφερόμενο

Πρώτα απ' όλα: για να κάνετε ένα στοιχείο μεταφερόμενο, ρυθμίστε την ιδιότητα draggable σε true:

<img draggable="true">

Περιεχόμενο μεταφοράς - ondragstart και setData()

Στη συνέχεια, ορίζεται τι θα συμβεί όταν το στοιχείο μεταφερθεί.

Στο παραπάνω παράδειγμα, η ιδιότητα ondragstart καλεί τη συνάρτηση drag(event), ορίζοντας τι δεδομένα θα μεταφερθούν.

Η μέθοδος dataTransfer.setData() ορίζει τον τύπο δεδομένων και την τιμή των μεταφερομένων δεδομένων:

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

Σε αυτό το παράδειγμα, ο τύπος δεδομένων είναι "text" και η τιμή είναι το id του διαδραστικού στοιχείου ("drag1").

Πού να τοποθετήσετε - ondragover

Το ondragover event καθορίζει πού μπορεί να τοποθετηθεί το μεταφερόμενο δεδομένο.

Από προεπιλογή, τα δεδομένα/στοιχεία δεν μπορούν να τοποθετηθούν σε άλλα στοιχεία. Για να επιτύχουμε το drag and drop, πρέπει να αποτρέψουμε αυτή την προεπιλεγμένη συμπεριφορά του στοιχείου.

Η εργασία αυτή γίνεται από τη μέθοδο preventDefault() του ondragover event:

event.preventDefault()

Κατάθεση - ondrop

Γίνεται το drop event όταν απελευθερώνεται το μεταφερόμενο δεδομένο.

Στο παρακάτω παράδειγμα, η οντωςτητα ondrop καλεί μια συνάρτηση, drop(event):

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

Αναγνώριση Κώδικα:

  • Κλήση preventDefault() για να αποτρέψετε την προεπιλεγμένη διαχείριση δεδομένων του προγράμματος περιήγησης (η προεπιλεγμένη συμπεριφορά του drop event είναι να ανοίξει ως σύνδεσμος)
  • Αποκτήστε τα δεδομένα που μετακινούνται με τη μέθοδο getData() του dataTransfer. Αυτή η μέθοδος θα επιστρέψει οποιοδήποτε δεδομένο που έχει οριστεί με τον ίδιο τύπο στη μέθοδο setData()
  • Τα δεδομένα που μετακινούνται είναι το id του στοιχείου που μετακινείται ("drag1")
  • Προσθέστε το στοιχείο που μετακινείται στο στοιχείο που το δέχεται

Περισσότερες Παραδείξεις

Μετακίνηση Εικόνας

Πώς να μετακινήσετε την εικόνα μεταξύ δύο στοιχείων <div>:

Παρακαλώ τραβήξτε την εικόνα του CodeW3C.com στον κύριο πλαίσιο.

Δοκιμάστε Εξ ολοκλήρου