html5 panduan-3. Bagaimana untuk melaksanakan fungsi seret dan lepas kemahiran tutorial elemen html_html5

Kandungan artikel ini adalah mengenai cara melaksanakan fungsi seret dan lepas elemen html dalam html5. Sebelum html5, untuk melaksanakan seret dan lepas, anda perlu menggunakan js Sekarang html5 menyokong fungsi seret dan lepas secara dalaman, tetapi untuk melaksanakan fungsi yang lebih kompleks, bantuan js masih diperlukan. Mari lihat beberapa contoh di bawah.
1. Cipta objek seret
Kita boleh memberitahu pelayar elemen mana yang perlu melaksanakan fungsi seret melalui atribut boleh seret. draggable mempunyai tiga nilai: benar: elemen boleh diseret palsu: elemen tidak boleh diseret secara automatik: pelayar menentukan sama ada elemen boleh diseret;
Nilai lalai sistem ialah auto, tetapi dalam kes auto, penyemak imbas mempunyai sokongan yang berbeza untuk fungsi seret dan lepas elemen yang berbeza Contohnya, objek img disokong tetapi objek div tidak disokong. Oleh itu, jika anda perlu menyeret elemen, sebaiknya tetapkan draggale kepada benar. Mari lihat contoh di bawah:

Salin kod

Kodnya adalah seperti berikut:

🎜>{
apung: kiri;
}
#sasaran, #src > 4px;
}
#sasaran
{
tinggi: 123px;
lebar: 220px; 🎜>#sasaran > ; p
{
paparan: sel-meja;
menjajarkan: tengah; 1px;
}

"true" id= "html5 panduan-3. Bagaimana untuk melaksanakan fungsi seret dan lepas kemahiran tutorial elemen html_html5" src="img/1.jpg" alt="html5 panduan-3. Bagaimana untuk melaksanakan fungsi seret dan lepas kemahiran tutorial elemen html_html5" />

target">

turun di sini

var src = document.getElementById("src");
var target = document.getElementById("target"); /html>


Kesan operasi:





2. Mengendalikan acara seretan

Sekarang mari kita pelajari tentang acara berkaitan seretan. Terdapat dua jenis acara, satu acara objek seretan, dan satu lagi acara seretan acara drop area. Peristiwa seret termasuk: dragstart: dicetuskan apabila seretan elemen bermula; Mari lihat contoh di bawah:





Salin kod


Kodnya adalah seperti berikut:



🎜>{
apung: kiri; }
#sasaran, #src > 4px;
}

#sasaran {

tinggi: 123px;
lebar: 220px; 🎜>#sasaran > p { paparan: sel jadual;
menjajarkan: tengah; 1px;
}
img.diseret

{

warna latar: Jingga } body>

>

turun di sini

);
var msg = document.getElementById("msg"); 🎜>src. ondragend = fungsi (e) {
e.target.classList.remove("dragged");
msg.innerHTML = "drop here"; fungsi (e) {
msg.innerHTML = e.target.id
}
🎜>
Kesan operasi:

3. Cipta kawasan jatuhkan
Mari kita lihat peristiwa yang berkaitan dengan kawasan jatuh: dragenter: tercetus apabila objek seret memasuki kawasan dragover: tercetus apabila objek seret bergerak dalam kawasan drop ; dragleave: Dicetuskan apabila objek seret tidak diletakkan di kawasan drop dan meninggalkan kawasan drop: Dicetuskan apabila objek seret diletakkan di kawasan drop.
Mari kita lihat contoh:

Salin kod

Kodnya adalah seperti berikut:

*
{
apung: kiri;
}
#sasaran, #src > margin: 4px;
}
#sasaran
{
tinggi: 123px;
lebar: 220px; }
#sasaran > p
{
paparan: sel jadual;
menjajarkan: tengah; margin: 1px;
}
img.diseret
{
warna latar:
}

< ;img draggable="true" id="car2" src="img/2.jpg" alt="car2" />

;

target");
var msg = document.getElementById("msg");
var draggedID;
target.ondragenter = handleDrag;
target.ondragover = handleDrag;
function handleDrag(e ) {
e.preventDefault();
}
target.ondrop = fungsi (e) {
var newElem = document.getElementById(draggedID).cloneNode(false); innerHTML = "" ;
target.appendChild(newElem);
e.preventDefault(); ;
e.target.classList.add("drag");
}
src.ondragend = function (e) {
var elems = document.querySelectorAll(".draged"); 🎜>untuk ( var i = 0; i elem[i].classList.remove("diseret"); skrip>









4. Gunakan DataTransfer

Kami menggunakan DataTransfer untuk memindahkan data dari objek seret ke kawasan drop. DataTransfer mempunyai sifat dan kaedah berikut: jenis: mengembalikan format data getData(): mengembalikan data dalam format yang ditetapkan(, ): menetapkan data; format yang ditentukan; clearData(): mengalih keluar data format yang ditentukan: mengembalikan tatasusunan fail yang telah dihantar.
Mari kita lihat contoh berikut, yang mencapai kesan yang sama seperti Contoh 3:





Salin kod


The kod adalah seperti berikut :

Contoh

#src > *
{
apung: kiri;
}
#src > img
{
sempadan: hitam pepejal nipis;
lapik: 2px;
margin: 4px;
}
#sasaran
{
sempadan: hitam pejal nipis;
margin: 4px;
}
#sasaran
{
tinggi: 123px;
lebar: 220px;
text-align: tengah;
paparan: meja;
}
#sasaran > p
{
paparan: sel jadual;
menjajarkan menegak: tengah;
}
img.diseret
{
warna latar belakang: Jingga;
}

turun di sini

var src = document.getElementById("src");
var target = document.getElementById("target");
target.ondragenter = handleDrag;
target.ondragover = handleDrag;
function handleDrag(e) {
e.preventDefault();
}
target.ondrop = fungsi (e) {
var droppedID = e.dataTransfer.getData("Teks");
var newElem = document.getElementById(droppedID).cloneNode(false);
target.innerHTML = "";
target.appendChild(newElem);
e.preventDefault();
}
src.ondragstart = fungsi (e) {
e.dataTransfer.setData("Teks", e.target.id);
e.target.classList.add("drag");
}
src.ondragend = fungsi (e) {
var elems = document.querySelectorAll(".draged");
untuk (var i = 0; i elems[i].classList.remove("drag");
}
}

5.拖拽文件
html5支持file api，可以让我们操作本地文件。一们戬支持们可以结合其他特性一起使用，比如结合拖拽特效，如下例：

复制代码

复制代码





城🎜 >


Contoh

badan > *
{
apung: kiri;
}
#sasaran
{
sempadan: hitam berganda sederhana;
margin: 4px;
tinggi: 75px;
lebar: 200px;
text-align: tengah;
paparan: meja;
}
#sasaran > p
{
paparan: sel jadual;
menjajarkan menegak: tengah;
}
jadual
{
margin: 4px;
runtuh sempadan: runtuh;
}
ke, td
{
lapik: 4px;
}

Letakkan Fail Di Sini

var target = document.getElementById("target");
target.ondragenter = handleDrag;
target.ondragover = handleDrag;
function handleDrag(e) {
e.preventDefault();
}
target.ondrop = fungsi (e) {
var files = e.dataTransfer.files;
var tableElem = document.getElementById("data");
tableElem.innerHTML = "";
untuk (var i = 0; i var row = ""; tableElem.innerHTML = baris; } e.preventDefault(); }

Nama	Type	Saiz
" fail[i].nama "	" fail[i].taip "	" fail[i].saiz "