Komentar: Sebelum HTML5, untuk mengimplementasikan operasi seret dan drop elemen halaman web, perlu untuk mengandalkan mousedown, mousemove, mouseUp dan API lainnya untuk mengimplementasikannya melalui sejumlah besar kode JS. Sekarang HTML5 sangat menyederhanakan kesulitan seret dan lepas operasi elemen halaman web. Selain mendukung drag dan drop elemen di dalam browser, API juga mendukung menyeret data antara browser dan aplikasi lainnya.
Sebelum HTML5, untuk mengimplementasikan operasi seret dan drop elemen halaman web, kita perlu mengandalkan mousedown, mousemove, mouseUp dan API lainnya untuk mengimplementasikannya melalui sejumlah besar kode JS; HTML5 memperkenalkan API yang secara langsung mendukung operasi drag and drop, yang sangat menyederhanakan kesulitan pemrograman drag dan lepas operasi elemen halaman web. Selain mendukung drag dan drop elemen di dalam browser, API ini juga mendukung data yang menyeret antara browser dan aplikasi lainnya.
Artikel ini menggunakan contoh sederhana untuk menunjukkan cara menggunakan drag dan drop API di HTML5.
Pemandangan:
Seperti yang ditunjukkan pada gambar di bawah ini, kami ingin menerapkan:
Seret foto dari area album kiri ke tempat sampah kanan dengan menyeret dan menjatuhkan; Selama proses seret, bagian pengingat yang hangat harus segera diingatkan, dan operasi drag and drop saat ini sedang dilakukan;
Metode Implementasi:
Seperti yang ditunjukkan pada antarmuka di atas, kode HTML relatif sederhana, sebagai berikut:
<! Doctype html>
<Html>
<head>
<title> html5 mengimplementasikan operasi seret dan lepas </iteme>
<meta charset = "UTF-8"/>
<tyle>
.album
{
Perbatasan: 3px putus #CCC;
float: kiri;
margin: 10px;
Min-tinggi: 100px;
padding: 10px;
Lebar: 220px;
}
</tyle>
</head>
<body ">
<div>
<H2> Pengingat Hangat: Anda dapat menyeret foto langsung ke tempat sampah </h2>
</div>
<div>
<h2> album </h2>
<img draggable = "true" src = "img /bg_01.png" />
<img draggable = "true" src = "img /bg_02.png" />
<img draggable = "true" src = "img /bg_03.png" />
</div>
<div>
<H2> Sampah dapat </h2>
</div>
<br/>
</body>
</html>
Catatan: Jika Anda ingin menerapkan operasi seret dan jatuhkan, Anda perlu menambahkan Atribut True Draggable = True ke elemen yang akan diseret dan dijatuhkan;
Selanjutnya, tambahkan kode JS berikut ke acara Onload. Komentar lebih rinci dan tidak akan dijelaskan secara terpisah.
<script>
fungsi init () {
var info = document.geteLementById ("info");
// Dapatkan elemen seret dan jatuhkan. Contoh ini adalah div di mana album berada.
var src = document.getElementById ("album");
// Mulai Seret dan Jatuhkan Operasi
src.ondragStart = function (e) {
// Dapatkan ID foto drag-and-drop
var dragimgid = e.target.id;
// Dapatkan elemen yang diseret
var dragimg = document.getElementById (dragImgid);
// Operasi Drag and Drop berakhir
dragimg.ondragend = function (e) {
// Pulihkan pesan pengingat
info.innerhtml = "<h2> Pengingat Kreatif: Anda dapat menyeret foto langsung ke tempat sampah Can </h2>";
};
e.datatransfer.setData ("Teks", DragImgid);
};
// Proses Seret dan Jatuhkan
src.ondrag = function (e) {
info.innerHtml = "<H2>-foto sedang diseret-</h2>";
}
// Dapatkan elemen target seret dan lepas
var target = document.geteLementById ("trash");
// tutup pemrosesan default;
target.ondragenter = function (e) {
e.preventdefault ();
}
target.ondragover = function (e) {
e.preventdefault ();
}
// Sesuatu menyeret dan turun ke elemen target
target.ondrop = function (e) {
var draggedId = e.datatransfer.getData ("teks");
// Dapatkan objek DOM di album
var oldelem = document.getElementById (draggedId);
// Hapus simpul foto dari album Div
oldelem.parentnode.removechild (oldelem);
// Tambahkan node dom foto yang diseret ke div sampah;
Target.AppendChild (Oldelem);
info.innerhtml = "<h2> Pengingat Kreatif: Anda dapat menyeret foto langsung ke tempat sampah Can </h2>";
e.preventdefault ();
}
}
</script>
Menyadari efeknya: