masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

HTML5 Seret dan Lepas

Seret dan Lepaskan

Seret dan lepas ialah ciri biasa di mana anda mengambil objek dan menyeretnya ke lokasi lain kemudian.

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

1. Seret dan lepas HTML5

Seret dan lepas (Seret dan lepas) adalah sebahagian daripada standard HTML5.

2. Seret mula

ondragstart: Fungsi dipanggil, seret (peristiwa), yang menentukan data yang diseret

3. Tetapkan data seret

setData(): Tetapkan jenis data dan nilai data yang diseret.

4. Peletakan

ondragover: Acara menentukan tempat untuk meletakkan data yang diseret.

5 Peletakan

ondrop: Apabila meletakkan data yang diseret dan digugurkan, peristiwa jatuh akan berlaku

Ringkasan:

ondrop Peristiwa yang dicetuskan pada sasaran seret (elemen sumber):

ondragstart: Dicetuskan apabila pengguna mula menyeret elemen
ondrag: Dicetuskan apabila elemen sedang diseret
ondragend: Dicetuskan selepas pengguna selesai menyeret elemen

Peristiwa dicetuskan apabila sasaran dilepaskan

ondragenter: Acara ini dicetuskan apabila objek yang diseret oleh tetikus memasuki skop bekasnya
ondragover: Apabila objek yang diseret berada dalam bekas objek lain Ini peristiwa dicetuskan apabila menyeret dalam julat
ondragleave: Peristiwa ini dicetuskan apabila objek yang diseret oleh tetikus meninggalkan skop bekasnya
ondrop: Peristiwa ini dicetuskan apabila butang tetikus dilepaskan semasa proses menyeret

Seret dan lepas contoh: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>drop</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
        }
        #box1{
            float: left;
            background-color: #CCCCCC;
        }
        #box2{
            float: left;
            background-color: aqua;
        }
    </style>
    <script> var box1Div, msgDiv, img1, box2Dib;
    window.onload = function () {
        box1Div = document.getElementById("box1");
        msgDiv = document.getElementById("msg");
        img1 = document.getElementById("img1");
        box2Div = document.getElementById("box2");
        box1Div.ondragover = function (e) {
            e.preventDefault();
        }
        box2Div.ondragover = function (e) {
            e.preventDefault();
        }
        img1.ondragstart = function (e) {
            e.dataTransfer.setData("imgId","img1");
        }
        box1Div.ondrop = dropImghandler;
        box2Div.ondrop = dropImghandler;
        function dropImghandler(e) {
            //创建节点
 var img = document.getElementById(e.dataTransfer.getData("imgId"));
            e.target.appendChild(img);
        }
    }
    function showObj(obj) {
        var s = "";
        for(var k in obj){
            s+=k+":"+obj[k]+"<br/>";
        }
        msgDiv.innerHTML = s;
    }</script>
</head>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" src="http://img4.imgtn.bdimg.com/it/u=4240085321,3307603809&fm=21&gp=0.jpg" alt="">
<div id="msg"></div>
</body>
</html>


Meneruskan pembelajaran
||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>drop</title> <style> .box{ width: 400px; height: 400px; } #box1{ float: left; background-color: #CCCCCC; } #box2{ float: left; background-color: aqua; } </style> <script> var box1Div, msgDiv, img1, box2Dib; window.onload = function () { box1Div = document.getElementById("box1"); msgDiv = document.getElementById("msg"); img1 = document.getElementById("img1"); box2Div = document.getElementById("box2"); box1Div.ondragover = function (e) { e.preventDefault(); } box2Div.ondragover = function (e) { e.preventDefault(); } img1.ondragstart = function (e) { e.dataTransfer.setData("imgId","img1"); } box1Div.ondrop = dropImghandler; box2Div.ondrop = dropImghandler; function dropImghandler(e) { //创建节点 var img = document.getElementById(e.dataTransfer.getData("imgId")); e.target.appendChild(img); } } function showObj(obj) { var s = ""; for(var k in obj){ s+=k+":"+obj[k]+"<br/>"; } msgDiv.innerHTML = s; }</script> </head> <body> <div id="box1" class="box"></div> <div id="box2" class="box"></div> <img id="img1" src="http://img4.imgtn.bdimg.com/it/u=4240085321,3307603809&fm=21&gp=0.jpg" alt=""> <div id="msg"></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)  492834 permainan