cari

Rumah >hujung hadapan web >Tutorial H5 >Bagaimana untuk melaksanakan penyeretan elemen dalam kemahiran tutorial HTML5_html5

Bagaimana untuk melaksanakan penyeretan elemen dalam kemahiran tutorial HTML5_html5

WBOY
WBOYasal
2016-05-16 15:51:441622semak imbas

Ramai bahagian hadapan mungkin tidak memahami cara melaksanakan seret dan lepas HTML5 Artikel ini memberi anda beberapa idea. Susun dan sandarkan fail untuk rujukan mudah kemudian.

Contoh pertama:

index.html

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >  
  2. <html>  
  3. <kepala>  
  4.     <meta charset="UTF- 8">  
  5.     <tajuk>Serettajuk>  
  6.     <gaya>  
  7.         .kotak{   
  8.             lebar: 400px;   
  9.             tinggi: 400px;   
  10.             terapung: kiri;   
  11.         }   
  12.         #kotak1{   
  13.             latar belakang: #CCC;   
  14.         }   
  15.         #kotak2{   
  16.             latar belakang: #FF0;   
  17.         }   
  18.     gaya>  
  19. kepala>  
  20. <badan>  
  21. <div id="kotak1"  kelas="kotak">div>  
  22. <div id="kotak2"  kelas="kotak">div>  
  23. <img src="http: //pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg" alt<🎜">">">"> > id="img1" />  
Kod JavaScript复制内容到剪贴板
  1. "app1.js">   
  2.   
  3.   
  4.   
  5. app1.js   
  6. /** 
  7.  *   app1.js  
  8.  */  
  9.   
  10. var oBox1,   
  11.     oBox2,   
  12.     oImg1;   
  13.   
  14. window.onload = fungsi(){   
  15.     oBox1 = document.getElementById('box1');   
  16.     oBox2 = document.getElementById('box2');   
  17.     oImg1 = document.getElementById('img1');   
  18.   
  19.     //   
  20.     oBox1.ondragover = oBox2.ondragover = fungsi(e){   
  21.         e.preventDefault();   
  22.     };   
  23.   
  24.     //   
  25.     oImg1.ondragstart = fungsi(e){   
  26.         e.dataTransfer.setData('text', e.target.id);   
  27.     };   
  28.   
  29.     oBox1.ondrop = dropImg;   
  30.     oBox2.ondrop = dropImg;   
  31. };   
  32.   
  33. fungsi dropImg(e){   
  34.     e.preventDefault();   
  35.     var tempImg = document.getElementById(e.dataTransfer.getData('text'));   
  36.     e.target.appendChild(tempImg);   
  37. }    

Melibatkan mata pengetahuan

Peristiwa berikut akan dicetuskan semasa proses seret dan lepas:
Cetuskan acara pada sasaran seret (elemen sumber)
ondragstart - pengguna bermula menyeret elemen Dicetuskan apabila
ondrag - Dicetuskan apabila elemen sedang diseret
ondragen - Dicetuskan selepas pengguna selesai menyeret elemen

Peristiwa dicetuskan apabila sasaran dilepaskan
 ondragenter - Peristiwa ini dicetuskan apabila objek yang diseret oleh tetikus memasuki skop bekasnya
ondragover - Apabila objek diseret Peristiwa ini dicetuskan apabila objek yang diseret diseret dalam julat kontena objek lain
ondragleave - Peristiwa ini dicetuskan apabila objek yang diseret oleh tetikus meninggalkan julat kontena
ondrop - Semasa proses menyeret, Peristiwa ini dicetuskan apabila butang tetikus dilepaskan

objek peristiwa (digantikan dengan e)

e.sasaran

Penjelasan tentang W3Cschool ialah: Kembalikan elemen yang mencetuskan acara ini (nod sasaran acara ini hanya serasi dengan ie9 dan ke atas

).

e.preventDefault()

Batalkan tindakan lalai acara tersebut.

e.dataTransfer.setData()

Tetapkan jenis data dan nilai data yang diseret:

Salin kod
Kodnya adalah seperti berikut:
e. dataTransfer.setData("Teks",ev.target.id); //Parameter pertama ialah Teks (huruf kecil juga boleh diterima)

e.dataTransfer.getData()

Dapatkan data yang diseret:

Salin kod
Kod adalah seperti berikut:
e.dataTransfer .getData("Teks");

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

Teks asal: http://www.cnblogs.com/oovwall/p/5213580.html

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：HTML5: Lonjakan terbesar dalam petua tutorial standards_html5 webArtikel seterusnya：HTML5: Lonjakan terbesar dalam petua tutorial standards_html5 web

Artikel berkaitan

Lihat lagi