acara ondragstart

contoh

Mengeksekusi JavaScript di pengguna mulai menyeret <p> elemen ketika:

<P draggable = "true" ondragstart = "myFunction (event)"> menyeret saya! </ P>

Bagian bawah artikel ini berisi lebih banyak contoh.

Definisi dan Penggunaan

Acara ondragstart dipicu ketika pengguna mulai menyeret elemen atau teks yang dipilih.

HTML5 Drag dan Drop adalah fitur yang sangat umum. Untuk informasi lebih lanjut, lihat HTML tutorial HTML5 drag dan drop .

Catatan: Untuk membuat elemen draggable, Anda perlu menggunakan HTML5 draggable dengan properti.

Tip: The Link default dan gambar yang diseret, tidak ada atribut draggable.

Drag dan drop proses akan memicu peristiwa berikut:

Memicu event (sumber elemen) pada Drag Target:
- ondragstart - dipicu ketika pengguna mulai menyeret elemen
- ondrag - elemen diseret pemicu
- ondragend - dipicu setelah pengguna menyelesaikan elemen hambatan

Melepaskan peristiwa sasaran pemicu:
- OnDragEnter - Acara ini dipecat ketika mouse diseret objek ke berbagai wadah
- OnDragOver - Acara ini dipicu ketika objek diseret tarik objek kontainer di kisaran lain
- OnDragLeave - Acara ini dipecat ketika mouse diseret dari objek dalam jangkauan wadah
- onDrop - di menyeret sebuah, lepaskan tombol mouse ketika Anda memicu acara ini

Dukungan Browser

Catatan: Bila Anda tarik elemen, setiap 350 milidetik memicu acara ondragover.

peristiwa
ondragstart	4.0	9.0	3.5	6.0	12.0

tatabahasa

Di HTML:

<Elementondragstart = "myScript"> coba

Dalam JavaScript:

objek .ondragstart = function () {myScript }; mencoba

JavaScript, menggunakan () metode addEventListener:

objek .addEventListener ( "dragstart", myScript ); mencoba

Catatan: Internet Explorer 8 dan versi sebelumnya dari IE tidak mendukung () addEventListener metode.

rincian teknis

Apakah akan mendukung gelembung:	ya
Hal ini dapat dibatalkan:	ya
Jenis acara:	DragEvent
tag HTML didukung:	Semua elemen HTML

contoh yang lebih

contoh

Contoh berikut menunjukkan semua drag dan drop acara:

/ * Ketika hambatan pemicu * /
document.addEventListener ( "dragstart", function (event) {
//dataTransfer.setData () metode untuk mengatur jenis data dan data yang seret
event.dataTransfer.setData ( "Text", event.target.id);
// Output beberapa teks sambil menyeret p elemen
. Document.getElementById ( "demo") innerHTML = "mulai menyeret p elemen.";
// Ubah transparansi elemen hambatan
event.target.style.opacity = "0.4";
});
// P elemen tarik pada saat yang sama, mengubah warna teks output
document.addEventListener ( "drag", function (event) {
. Document.getElementById ( "demo") style.color = "red";
});
// Output End p elemen ketika menyeret beberapa elemen teks dan reset transparansi
document.addEventListener ( "dragend", function (event) {
. Document.getElementById ( "demo") innerHTML = "lengkap p tarik elemen";
event.target.style.opacity = "1";
});
/ * Setelah selesai hambatan memicu * /
// Lengkapi elemen tarik ketika p masukkan DropTarget, gaya perbatasan mengubah div
document.addEventListener ( "dragenter", function (event) {
jika (event.target.className == "DropTarget") {
event.target.style.border = "3px dotted merah";
}
});
// Secara default, data / unsur tidak dapat menyeret dan menjatuhkan elemen lainnya. Untuk penurunan Kita harus mencegah elemen pengolahan standar
document.addEventListener ( "dragover", function (event) {
event.preventDefault ();
});
// Ketika drag dan drop elemen p meninggalkan DropTarget, ulang div style border
document.addEventListener ( "dragleave", function (event) {
jika (event.target.className == "DropTarget") {
event.target.style.border = "";
}
});
/ * Untuk drop, mencegah browser pengolahan data default (di link penurunan diaktifkan secara default)
Ulang output warna border dan warna teks dari DIV
Menggunakan data dataTransfer.getData () metode untuk mendapatkan turun
Mop elemen data id ( "drag1")
elemen tambahan untuk drop elemen tarik * /
document.addEventListener ( "drop", function (event) {
event.preventDefault ();
jika (event.target.className == "DropTarget") {
document.getElementById ( "demo") style.color = "".;
event.target.style.border = "";
var data = event.dataTransfer.getData ( "Text");
event.target.appendChild (document.getElementById (data));
}
});

Coba »