Peristiwa ondragstart

Kursus yang disarankan:

Definisi dan penggunaan

Acara ondragstart terjadi saat pengguna mulai menggeser elemen atau pilihan teks. Tolong HTML5pada tutorial HTML. Geser dan lepas adalah fungsi yang sangat umum dalam HTML5. Ini adalah saat Anda "menangkap" objek dan menariknya ke posisi yang berbeda. Untuk mendapatkan pengetahuan lebih lanjut, baca artikel kami tentang

Catatan:Untuk membuat elemen dapat digeser, gunakan tutorial HTML global Atribut draggable HTML5。

Petunjuk:Secara default, tautan dan gambar dapat digeser, tanpa atribut draggable.

Pada berbagai tahap operasi geser dan lepas, banyak acara yang digunakan, dan mungkin terjadi:

Acara yang diaktifkan di target yang dapat digeser (elemen sumber):

• ondragstart - Terjadi ketika pengguna mulai menggeser elemen.
• ondrag - Terjadi ketika elemen digeser.
• ondragend - Terjadi ketika pengguna menyelesaikan menggeser elemen.

Acara yang diaktifkan di target penempatan:

• ondragenter - Terjadi ketika elemen yang digeser memasuki target penempatan.
• ondragover - Terjadi ketika elemen yang digeser berada di atas target penempatan.
• ondragleave - Terjadi ketika elemen yang digeser meninggalkan target penempatan.
• ondrop - Terjadi ketika elemen yang digeser ditempatkan di target penempatan.

Contoh

Eksekusi JavaScript saat pengguna mulai menggeser elemen <p>:

<p draggable="true" ondragstart="myFunction(event)">Seret saya!</p>

Coba sendiri

Ada contoh TIY lebih banyak di bawah halaman.

Sintaksis

Pada HTML:

<element ondragstart="myScript">

Coba sendiri

Pada JavaScript:

object.ondragstart = function(){myScript};

Coba sendiri

Pada JavaScript, gunakan metode addEventListener():

object.addEventListener("dragstart", myScript);

Coba sendiri

Catatan:Internet Explorer 8 atau versi yang lebih awal tidak mendukung method addEventListener()。

Detil teknis

Dukungan browser

Angka di tabel menunjukkan versi pertama browser yang mendukung peristiwa ini.

Contoh lain

Pertunjukan untuk semua peristiwa seret dan lepas yang mungkin:

<p draggable="true" id="dragtarget">Seret saya!</p>
<div class="droptarget">Seret di sini!</div>
<script>
/* ----------------- Peristiwa yang diaktifkan di sisi target seret dan lepas ----------------- */
document.addEventListener("dragstart", function(event) {
  // Mengatur jenis dan nilai data yang diseret dengan method dataTransfer.setData()
  event.dataTransfer.setData("Text", event.target.id);
  // Menyempan beberapa teks saat mulai menyeret elemen p
  document.getElementById("demo").innerHTML = "Mulai menyeret elemen p.";
  // Mengubah kecerahan elemen yang dapat diseret
  event.target.style.opacity = "0.4";
});
// Mengubah warna teks output semasa menyeret elemen p
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// Menyempan beberapa teks dan mengatur kecerahan setelah menyeret elemen p
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Selesai menyeret elemen p.";
  event.target.style.opacity = "1";
});
/* ----------------- Peristiwa yang diaktifkan di tempat pemasangan ----------------- */
// Saat elemen p yang dapat diseret memasuki droptarget, ubah gaya garis kotak DIV
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// Secara baku, data/element tidak dapat disisihkan di dalam elemen lain. Untuk memungkinkan pemasangan, kita harus menghentikan penanganan baku elemen
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// Saat elemen p yang dapat diseret meninggalkan droptarget, atur ulang gaya garis kotak DIV
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* Pada saat dilepas - Menghentikan penanganan baku browser untuk data (membuka seperti tautan saat dilepas baku)
Atur ulang warna teks dan warna garis kotak DIV
Dapatkan data yang diseret menggunakan method dataTransfer.getData()
Data yang diseret adalah id elemen yang diseret ("drag1")
Tambah elemen yang dapat diseret ke dalam elemen tempat
*/
document.addEventListener("drop", function(event) {
  event.preventDefault();
  if ( 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));
  }
});
</script>

Coba sendiri

Halaman yang berhubungan

Panduan HTML: Tarik dan Letak HTML5

Panduan HTML: Properti draggable HTML

Alat Kecil

Panduan Rujukan JavaScript dan HTML DOM

Contoh JavaScript

Ujian JavaScript

Panduan JavaScript

Pautan Pembolehbelah