HTML5 Drag and Drop

Παρακαλώ σύρετε την εικόνα του CodeW3C.com στον ορθογώνιο.

拖放

拖放（Drag 和 Drop）是很常见的特性。它指的是您抓取某物并拖入不同的位置。

拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。

浏览器支持

表格中的数字指示了完全支持拖放的首个浏览器版本。

API
拖放 4.0 9.0 3.5 6.0 12.0

HTML 拖放实例

下列是关于拖放的简单例子：

实例

Δοκιμάστε Προσωπικά

它也许看上去有点复杂，不过让我们研究一下拖放事件的所有不同部分。

把元素设置为可拖放

首先：为了把一个元素设置为可拖放，请把 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.preventDefault() του συμβάντος ondragover:

event.preventDefault();

Δημιουργία Πρόθεσης - ondrop

Ορίζεται το συμβάν drop όταν απελευθερώνεται το μεταφερόμενο δεδομένο.

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

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

Επεξήγηση Κώδικα:

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

Περισσότερες Εγχειρίσεις

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

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

Παρακαλώ σύρετε την εικόνα του CodeW3C.com στον ορθογώνιο.

Δοκιμάστε Προσωπικά