Σύνδεση
Μενού

HTML5 Drag & Drop

Το Drag and drop αποτελεί μέρος του προτύπου HTML5.

Drag and Drop

Το Drag and drop είναι ένα πολύ κοινό χαρακτηριστικό. Είναι οταν “πάρετε” ένα αντικείμενο, το σύρετε (drag) και το αφήσετε (drop) σε μια διαφορετική θέση .
Στην HTML5, το drag and drop είναι μέρος του προτύπου, καθώς κάθε στοιχείο μπορεί να είναι draggable.

Browser Support

Ο Internet Explorer 9, Firefox, Chrome, και ο Safari 5 υποστηρίζουν το drag and drop.

σημείωση: Το Drag and drop δεν λειτουργεί με τον Safari 5.1.2.

HTML5 Drag and Drop παραδείγματα

Το παρακάτω αποτελέι ένα απλό παράδειγμα του drag and drop

Παράδειγμα


<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</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>

δείτε το εδώ σε εφαρμογή

Μπορεί να φαίνεται περίπλοκο, αλλά ας παρουμε με την σειρά όλα τα μέρη του ενός drag and drop συμβάν (event).

Κάντε τα στοιχεία Draggable

Πρώτα απ ‘όλα: Για να κάνετε ένα στοιχείο draggable, πρέπει να ορίσετε την ιδιότητα (attribute) draggable σε αλήθεια (true)

<img draggable="true" />

Τι να κάνετε  Drag – ondragstart και setData()

Στη συνέχεια, καθορίστε τι θα συμβεί όταν το στοιχείο σύρετε.
Στο παραπάνω παράδειγμα, το χαρακτηριστικό ondragstart καλεί μια συνάρτηση, μεταφοράς (evenet), που καθορίζει ποια δεδομένα πρέπει να συρθούν.
Η dataTransfer.setData () μέθοδος καθορίζει το είδος (type) και την αξία (value) των δεδομένων που σύρετε.


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

Στην περίπτωση αυτή, ο τύπος δεδομένων είναι το “Text” και η τιμή είναι το id του draggable στοιχείου (“drag1”).

Που να κάνετε Drop – ondragover

Το event ondragover καθορίζει πού μπορούν να πέσουν τα δεδομένα που σύρετε.
Από προεπιλογή, τα δεδομένα/στοιχεία δεν μπορούν να πέσουν σε άλλα στοιχεία. Για να επιτραπεί η πτώση, πρέπει να αλλάξουμε την προεπιλογή του στοιχείου.
Αυτό γίνεται με την κλήση του event.preventDefault () μέθοδο, για το event ondragover:

event.preventDefault()

Κάντε την πτώση (Drop) – ondrop

Όταν τα δεδομένα που σύρετε πέσουν, ένα γεγονός (event) θα συμβεί.
Στο παρακάτω παράδειγμα, το χαρακτηριστικό ondrop καλεί μια συνάρτηση, drop(event):


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

επεξήγηση κωδικού:

  • Πάρτε τα δεδομένα που σύρετε με την dataTransfer.getData («Text») μέθοδο. Αυτή η μέθοδος θα επιστρέψει όλα τα δεδομένα που ορίστηκαν στον ίδιο τύπο στην setData () μέθοδο
  • Τα δεδομένα που σύρετε είναι το id του συρόμενου στοιχείου (“drag1”)
  • Προσθέστε το στοιχείο που σύρετε στο στοιχείο που κάνετε drop
  • Καλέστε το preventDefault() για να αποτραπεί απο το πρόγραμμα περιήγησης το default handling των δεδομένων. (η προεπιλογή είναι να ανοίγει ως σύνδεσμος στην πτώση(drop)