Bagaimana untuk melaksanakan penyeretan elemen dalam kemahiran tutorial HTML5

Bagaimana untuk melaksanakan penyeretan elemen dalam kemahiran tutorial HTML5_html5

WBOY

Lepaskan： 2016-05-16 15:51:44

asal

1603 orang telah melayarinya

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

>
<html>
<kepala>
<meta charset="UTF- 8">
<tajuk>Serettajuk>
<gaya>
.kotak{
lebar: 400px;
tinggi: 400px;
terapung: kiri;
}
#kotak1{
latar belakang: #CCC;
}
#kotak2{
latar belakang: #FF0;
}
gaya>
kepala>
<badan>
<div id="kotak1" kelas="kotak">div>
<div id="kotak2" kelas="kotak">div>
<img src="http: //pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg" alt<🎜">">">"> > id="img1" />

Kod JavaScript复制内容到剪贴板

"app1.js">
app1.js
/**
* app1.js
*/
var oBox1,
oBox2,
oImg1;
window.onload = fungsi(){
oBox1 = document.getElementById('box1');
oBox2 = document.getElementById('box2');
oImg1 = document.getElementById('img1');
//
oBox1.ondragover = oBox2.ondragover = fungsi(e){
e.preventDefault();
};
//
oImg1.ondragstart = fungsi(e){
e.dataTransfer.setData('text', e.target.id);
};
oBox1.ondrop = dropImg;
oBox2.ondrop = dropImg;
};
fungsi dropImg(e){
e.preventDefault();
var tempImg = document.getElementById(e.dataTransfer.getData('text'));
e.target.appendChild(tempImg);
}

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: