Operasi seret dan lepas HTML5 HTML5 melaksanakan operasi seret dan lepas elemen halaman web elemen_html5 kemahiran tutorial

Sebelum HTML5, untuk melaksanakan operasi seret dan lepas elemen halaman web, anda perlu bergantung pada tetikus turun, gerakan tetikus, tetikus naik dan API lain, yang dilaksanakan melalui sejumlah besar kod JS HTML5 yang memperkenalkan API secara langsung menyokong operasi drag-and-drop, yang sangat memudahkan elemen halaman web Adalah sukar untuk memprogramkan operasi drag-and-drop, dan API ini bukan sahaja menyokong drag-and-drop elemen dalam penyemak imbas, tetapi juga menyokong penyeretan data bersama. antara penyemak imbas dan aplikasi lain.

Artikel ini menggunakan contoh mudah untuk menunjukkan penggunaan API drag-and-drop dalam HTML5.

Adegan:

Seperti yang ditunjukkan dalam rajah di bawah, kami ingin mencapai:

Seret foto dari kawasan "Album" di sebelah kiri ke kawasan "Sampah" di sebelah kanan dengan menyeret dan menjatuhkan; semasa proses menyeret, bahagian "Petua Hangat" harus mengingatkan anda bahawa seret dan lepas operasi sedang dijalankan

Kaedah pelaksanaan:

Kod HTML antara muka di atas agak mudah, seperti berikut:

Peringatan hangat: Anda boleh menyeret foto terus ke tong sampah

Album

Sampah< ;/h2>

Nota: Jika anda ingin melaksanakan operasi seret dan lepas, Anda perlu menambah atribut draggable="true" pada elemen yang hendak diseret dan digugurkan

Seterusnya, tambahkan kod JS berikut pada acara onload Komennya agak terperinci dan tidak akan diterangkan secara berasingan.

Salin kod

Kod tersebut adalah seperti berikut:

function init(){
var info = document.getElementById("info");
//Dapatkan elemen yang diseret dan digugurkan, contoh ini adalah di mana album foto ialah DIV
var src = document.getElementById("album");
//Mulakan operasi seret dan lepas
src.ondragstart = fungsi (e) {
//Dapatkan ID foto yang diseret dan digugurkan
var dragImgId = e.target.id;
//Dapatkan elemen yang diseret
var dragImg = document.getElementById(dragImgId);
//Operasi seret dan lepas tamat
dragImg.ondragend = function(e){
//Pulihkan maklumat peringatan
info.innerHTML="

Peringatan hangat: Anda boleh menyeret foto terus ke tong sampah

";
};
e.dataTransfer.setData("text",dragImgId);
};
//Semasa proses seret dan lepas
src.ondrag = function(e){
info.innerHTML="

--Foto sedang diseret--

";
}
//Dapatkan elemen sasaran seret dan lepas
var target = document. getElementById("sampah");
//Matikan pemprosesan lalai;
target.ondragenter = function(e){
e.preventDefault();
}
target.ondragover = function (e){
e .preventDefault();
}
//Sesuatu diseret dan dijatuhkan pada elemen sasaran
target.ondrop = function (e) {
var dragID = e .dataTransfer.getData("text");
//Dapatkan objek DOM dalam album
var oldElem = document.getElementById(draggedID);
//Alih keluar nod foto daripada album DIV
oldElem.parentNode.removeChild(oldElem);
//Tambahkan nod DOM foto yang diseret ke DIV tong sampah
target.appendChild(oldElem);
info.innerHTML="

;Petua hangat: Anda boleh menyeret foto terus Ke tong sampah

";
e.preventDefault();
}
}

untuk mencapai kesan :