Panduan HTML5 - 3. Cara Menerapkan Fungsi Seret dan Jatuhkan Elemen HTML

Penulis：Eve Cole Waktu Pembaruan：2025-04-12 09:48:02

Konten artikel ini adalah tentang cara mengimplementasikan fungsi seret elemen HTML di html5/"> html5. Untuk mengimplementasikan drag dan drop sebelum HTML5, Anda perlu menggunakan JS. Sekarang HTML5 mendukung fungsi drag dan drop secara internal, tetapi untuk menerapkan fungsi yang sedikit lebih kompleks, JS tidak diperlukan. Mari kita lihat beberapa contoh di bawah ini.

1. Buat objek seret

Kami dapat memberi tahu browser melalui atribut yang dapat diseret elemen mana yang perlu diimplementasikan fungsi drag and drop. Ditarik memiliki tiga nilai: true: elemen dapat diseret; Salah: Elemen tidak dapat diseret; Otomatis: Browser menentukan apakah elemen dapat diseret dengan sendirinya.

Nilai default sistem adalah otomatis, tetapi browser mendukung berbagai fungsi drag dan drop dari elemen yang berbeda dalam kasus mobil, seperti: itu mendukung objek IMG, tetapi tidak mendukung objek div. Jadi, jika Anda perlu menyeret elemen, yang terbaik adalah mengatur Draggale ke True. Mari kita lihat contoh di bawah ini:

<! Doctype html>

<Html>

<head>

<Title> Contoh </iteme>

<tyle>

#src> *

{

float: kiri;

}

#target, #src> img

{

Border: Black Solid Tipis;

padding: 2px;

margin: 4px;

}

#target

{

Tinggi: 123px;

Lebar: 220px;

Teks-Align: tengah;

Tampilan: Tabel;

}

#target> p

{

Tampilan: sel meja;

Vertikal-Align: tengah;

}

#target> img

{

margin: 1px;

}

</tyle>

</head>

<body>

Jatuhkan di sini </p>

</div>

var src = document.geteLementById ("src");

var target = document.geteLementById ("target");

</script>

</body>

</html>

Efek Menjalankan:

2. Tangani Acara Seret dan Jatuhkan

Sekarang mari kita pahami peristiwa yang terkait dengan menyeret. Ada dua jenis acara, satu adalah peristiwa dari objek drag, dan yang lainnya adalah peristiwa area drop. Acara seret meliputi: DragStart: dipicu saat elemen drag dimulai; Seret: dipicu selama elemen seret; Dragend: dipicu saat elemen seret berakhir. Mari kita ambil contoh di bawah ini:

<! Doctype html>

<Html>

<head>

<Title> Contoh </iteme>

<tyle>

#src> *

{

float: kiri;

}

#target, #src> img

{

Border: Black Solid Tipis;

padding: 2px;

margin: 4px;

}

#target

{

Tinggi: 123px;

Lebar: 220px;

Teks-Align: tengah;

Tampilan: Tabel;

}

#target> p

{

Tampilan: sel meja;

Vertikal-Align: tengah;

}

#target> img

{

margin: 1px;

}

img.dragged

{

latar belakang-warna: oranye;

}

</tyle>

</head>

<body>

Jatuhkan di sini </p>

</div>

var src = document.geteLementById ("src");

var target = document.geteLementById ("target");

var msg = document.geteLementById ("msg");

src.ondragStart = function (e) {

e.target.classlist.add ("diseret");

}

src.ondragend = function (e) {

e.target.classlist.remove ("diseret");

msg.innerhtml = "drop here";

}

src.ondrag = function (e) {

msg.innerhtml = e.target.id;

}

</script>

</body>

</html>

Efek Menjalankan:

3. Buat area pengiriman

Mari kita lihat peristiwa yang terkait dengan area pengiriman: Dragenter: dipicu saat objek seret memasuki area pengiriman; Dragover: dipicu ketika objek drag bergerak di area pengiriman; Dragleave: Objek seret tidak dikirim ke area pengiriman, dan dipicu ketika meninggalkan area pengiriman; Jatuhkan: dipicu saat objek seret ditempatkan di area pengiriman.

Mari kita lihat contoh:

<! Doctype html>

<Html>

<head>

<Title> Contoh </iteme>

<tyle>

#src> *

{

float: kiri;

}

#target, #src> img

{

Border: Black Solid Tipis;

padding: 2px;

margin: 4px;

}

#target

{

Tinggi: 123px;

Lebar: 220px;

Teks-Align: tengah;

Tampilan: Tabel;

}

#target> p

{

Tampilan: sel meja;

Vertikal-Align: tengah;

}

#target> img

{

margin: 1px;

}

img.dragged

{

Latar Belakang: Lightgrey;

}

</tyle>

</head>

<body>

Jatuhkan di sini </p>

</div>

var src = document.geteLementById ("src");

var target = document.geteLementById ("target");

var msg = document.geteLementById ("msg");

var draggedid;

target.ondragenter = handledrag;

target.ondragover = handledrag;

fungsi handledrag (e) {

e.preventdefault ();

}

target.ondrop = function (e) {

var newelem = document.geteLementById (draggedId) .clonenode (false);

target.innerhtml = "";

target.appendChild (newelem);

e.preventdefault ();

}

src.ondragStart = function (e) {

draggedId = e.target.id;

e.target.classlist.add ("diseret");

}

src.ondragend = function (e) {

var elems = document.queryselectorall (". diseret");

untuk (var i = 0; i <elems.length; i ++) {

elem [i] .classlist.remove ("diseret");

}

</script>

</body>

</html>

Hasil Menjalankan:

4. Gunakan DataTransfer

Kami menggunakan DataTransfer untuk meneruskan data dari objek seret ke area pengiriman. DataTransfer memiliki sifat dan metode berikut: Jenis: Kembalikan format data; getData (<Bet Format>): Mengembalikan data format yang ditentukan; setData (<Better>, <date>): Mengatur data format yang ditentukan; clearData (<Bet Format>): Menghapus data format yang ditentukan; File: Mengembalikan array file yang telah dikirimkan.

Mari kita lihat contoh berikut, efek yang dicapai sama dengan Contoh 3:

<! Doctype html>

<Html>

<head>

<Title> Contoh </iteme>

<tyle>

#src> *

{

float: kiri;

}

#src> img

{

Border: Black Solid Tipis;

padding: 2px;

margin: 4px;

}

#target

{

Border: Black Solid Tipis;

margin: 4px;

}

#target

{

Tinggi: 123px;

Lebar: 220px;

Teks-Align: tengah;

Tampilan: Tabel;

}

#target> p

{

Tampilan: sel meja;

Vertikal-Align: tengah;

}

img.dragged

{

latar belakang-warna: oranye;

}

</tyle>

</head>

<body>

Jatuhkan di sini </p>

</div>

var src = document.geteLementById ("src");

var target = document.geteLementById ("target");

target.ondragenter = handledrag;

target.ondragover = handledrag;

fungsi handledrag (e) {

e.preventdefault ();

}

target.ondrop = function (e) {

var droppedId = e.datatransfer.getData ("teks");

var newelem = document.geteLementById (droppedId) .clonenode (false);

target.innerhtml = "";

target.appendChild (newelem);

e.preventdefault ();

}

src.ondragStart = function (e) {

e.datatransfer.setData ("teks", e.target.id);

e.target.classlist.add ("diseret");

}

src.ondragend = function (e) {

var elems = document.queryselectorall (". diseret");

untuk (var i = 0; i <elems.length; i ++) {

elem [i] .classlist.remove ("diseret");

}

</script>

</body>

</html>

5. Seret dan letakkan file

HTML5 mendukung API File, yang memungkinkan kami memanipulasi file lokal. Secara umum, kami tidak menggunakan API file secara langsung. Kita dapat menggunakannya dalam kombinasi dengan fitur lain, seperti menggabungkan efek drag dan drop, seperti yang ditunjukkan dalam contoh berikut:

<! Doctype html>

<Html>

<head>

<Title> Contoh </iteme>

<tyle>

Tubuh> *

{

float: kiri;

}

#target

{

Perbatasan: Black ganda sedang;

margin: 4px;

Tinggi: 75px;

Lebar: 200px;

Teks-Align: tengah;

Tampilan: Tabel;

}

#target> p

{

Tampilan: sel meja;

Vertikal-Align: tengah;

}

meja

{

margin: 4px;

Border-Collapse: runtuh;

}

Th, td

{

padding: 4px;

}

</tyle>

</head>

<body>

Jatuhkan file di sini </p>

</div>

</boable>

var target = document.geteLementById ("target");

target.ondragenter = handledrag;

target.ondragover = handledrag;

fungsi handledrag (e) {

e.preventdefault ();

}

target.ondrop = function (e) {

file var = e.datatransfer.files;

var tableelem = document.geteLementById ("data");

Tableelem.innerHtMl = "<tr> <t th> </t> <th> type </th> <th> size </th> </tr>";

untuk (var i = 0; i <file.length; i ++) {

var row = "<tr> <td>" + file [i] .name + "</td> <td>" + file [i] .type + "</td> <td>" + file [i] .size + "</td> </tr>";

tableelem.innerHtml += baris;

}

e.preventdefault ();

}

</script>

</body>

</html>

DataTransfer Mengembalikan objek daftar file, yang dapat kami perlakukan sebagai objek array file, dan file tersebut berisi properti berikut: Nama: Nama file; Jenis: Jenis file (tipe MIME); Ukuran: Ukuran file.

Efek Menjalankan:

6. Unggah file

Berikut ini adalah contoh mengunggah file dengan menyeret dan menjatuhkan Ajax.

<! Doctype html>

<Html>

<head>

<Title> Contoh </iteme>

<tyle>

.meja

{

Tampilan: Tabel;

}

.baris

{

Tampilan: Table-Row;

}

.sel

{

Tampilan: sel meja;

padding: 5px;

}

.label

{

Teks-Align: Benar;

}

#target

{

Perbatasan: Black ganda sedang;

margin: 4px;

Tinggi: 50px;

Lebar: 200px;

Teks-Align: tengah;

Tampilan: Tabel;

}

#target> p

{

Tampilan: sel meja;

Vertikal-Align: tengah;

}

</tyle>

</head>

<body>

<div>

Pisang: </div>

<div>

</div>

<div>

Apel: </div>

<div>

</div>

<div>

Ceri: </div>

<div>

</div>

<div>

File: </div>

<div>

</div>

<div>

Total: </div>

item </div>

</div>

Jatuhkan file di sini </p>

</div>

Kirim Formulir </button>

</form>

var target = document.geteLementById ("target");

var httprequest;

var filelist;

target.ondragenter = handledrag;

target.ondragover = handledrag;

fungsi handledrag (e) {

e.preventdefault ();

}

target.ondrop = function (e) {

FileList = e.datatransfer.files;

e.preventdefault ();

}

document.geteLementById ("kirim"). onclick = function stallebuttonpress (e) {

e.preventdefault ();

var form = document.geteLementById ("FruitForm");

var formdata = FormData baru (form);

if (filelist) {

untuk (var i = 0; i <fileList.length; i ++) {

formdata.append ("file" + i, daftar file [i]);

}

httpRequest = xmlhttpRequest () baru;

httprequest.onreadystatechange = handleresponse;

httprequest.open ("post", form.action);

httpRequest.send (formdata);

}

function handleresponse () {

if (httpRequest.readyState == 4 && httpRequest.status == 200) {

var data = json.parse (httpRequest.Responsetext);

document.geteLementById ("hasil"). innerHtml = "You Ordered" + Data.total + "item";

}

</script>

</body>

</html>

Memengaruhi:

Beberapa contoh di atas mungkin memiliki efek berjalan browser yang berbeda. Saya menggunakan browser chrome. Kecuali untuk contoh 5 dan 6 yang tidak mendukung banyak file, contoh lain dijalankan secara normal. Anda dapat mengunduh demo.

Alamat unduhan demo: html5guide.draggable.rar