masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Seret dan lepas HTML5

Seret dan lepas ialah ciri biasa di mana objek ditangkap dan kemudian diseret ke lokasi lain.

Dalam HTML5, seret dan lepas adalah sebahagian daripada standard dan mana-mana elemen boleh diseret dan digugurkan.

Seret dan lepas adalah sebahagian daripada standard HTML5.

Sokongan penyemak imbas

8.jpg


Internet Explorer 9+, Firefox, Opera, Chrome dan Safari menyokong penyeretan.

Nota: Safari 5.1.2 tidak menyokong penyeretan.

Contoh seret dan lepas HTML5

di bawah Contohnya ialah contoh seret dan lepas yang mudah: 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style type="text/css">
        #div1 {width:300px;height:200px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script>
        function allowDrop(ev)
        {
            ev.preventDefault();
        }
        function drag(ev)
        {
            ev.dataTransfer.setData("Text",ev.target.id);
        }
        function drop(ev)
        {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>
<body>
<p>拖动 W3CSchool.cc 图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="http://img1.ph.126.net/MnyJ0KB2x0x5uxhOnXJtNA==/3337730273835664288.gif" draggable="true" ondragstart="drag(event)" width="300" height="200">
</body>
</html>

Jalankan atur cara dan cuba seret imej

Atur cara mungkin kelihatan agak rumit, tetapi kita boleh mengkaji bahagian yang berbeza acara seret dan lepas secara berasingan.

Tetapkan elemen sebagai boleh seret

Pertama, untuk menjadikan elemen boleh seret, tetapkan atribut boleh seret kepada benar:

<img draggable="true">

Apa yang hendak diseret - ondragstart dan setData()

Kemudian, nyatakan perkara yang berlaku apabila elemen itu diseret.

Dalam contoh di atas, atribut ondragstart memanggil fungsi, drag(event), yang menentukan data untuk diseret.

kaedah dataTransfer.setData() menetapkan jenis data dan nilai data yang diseret:

function drag(ev)
{
ev.dataTransfer . setData("Teks",ev.target.id);
}

Dalam contoh ini, jenis data ialah "Teks" dan nilainya ialah id yang boleh diseret elemen ( "seret1").

Di mana hendak diletakkan - ondragover

acara ondragover Menentukan di mana untuk meletakkan data yang diseret.

Secara lalai, data/elemen tidak boleh diletakkan di dalam elemen lain. Jika kita perlu membenarkan peletakan, kita mesti menghalang pengendalian lalai bagi elemen tersebut.

Ini dilakukan dengan memanggil kaedah event.preventDefault() acara ondragover:

event.preventDefault()

untuk penempatan - ondrop

Apabila data yang diseret diletakkan, peristiwa jatuh akan berlaku.

Dalam contoh di atas, atribut ondrop memanggil fungsi, drop(event):

function drop(ev)
{
ev ();
var data=ev.dataTransfer.getData("Teks");
ev.target.appendChild(document.getElementById(data));
}

Penjelasan kod:

  • Panggil preventDefault() untuk mengelakkan pemprosesan lalai data penyemak imbas (tingkah laku lalai acara drop ialah membukanya sebagai pautan)

  • Dapatkan data yang diseret melalui kaedah dataTransfer.getData("Teks"). Kaedah ini akan mengembalikan sebarang set data kepada jenis yang sama dalam kaedah setData().

  • Data yang diseret ialah id elemen yang diseret ("drag1")

  • Tambahkan elemen yang diseret pada elemen peletakan (elemen sasaran ) Cara menyeret antara dua elemen <div> 

    • <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style type="text/css">
        #div1, #div2
        {float:left; width:200px; height:205px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script>
        function allowDrop(ev)
        {
            ev.preventDefault();
        }
        function drag(ev)
        {
            ev.dataTransfer.setData("Text",ev.target.id);
        }
        function drop(ev)
        {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="http://img1.ph.126.net/MnyJ0KB2x0x5uxhOnXJtNA==/3337730273835664288.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="190" height="190"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>

Jalankan program dan cuba

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> #div1, #div2 {float:left; width:200px; height:205px; margin:10px;padding:10px;border:1px solid #aaaaaa;} </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="http://img1.ph.126.net/MnyJ0KB2x0x5uxhOnXJtNA==/3337730273835664288.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="190" height="190"></div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492848 permainan