Heim > Artikel > Web-Frontend > So erstellen Sie einen Drag-Effekt in H5

So erstellen Sie einen Drag-Effekt in H5

php中世界最好的语言Original: 2018-01-09 10:38:034620Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie in H5 einen Drag-Effekt erzeugen. Drag-bezogene Attribute

Das ziehbare Attribut ist das

globale Attribut

von HTML5. Es ist eine der Möglichkeiten, mit denen HTML5 Drag-and-Drop-Vorgänge unterstützt und zur Anzeige verwendet wird ob ein Element per Drag & Drop verschoben werden kann, Draggable hat drei Werte, true bedeutet, dass es per Drag & Drop verschoben werden kann, false bedeutet, dass es nicht per Drag & Drop verschoben werden kann, auto bedeutet, dass der Standardwert des Browsers verwendet wird

Drag -bezogene Ereignisse

<ul>     
    <li id="item1" draggable="true">列表1</li>  
    <li id="item2" draggable="true">列表2</li>  
    <li id="item3" draggable="true">列表3</li>  
    <li id="item4" draggable="true">列表4</li>  
    <li id="item5" draggable="true">列表5</li>  
    <li id="item6" draggable="true">列表6</li>  
</ul>

ondragstart: Dieses Ereignis wird ausgelöst, wenn der Benutzer mit dem Ziehen eines Elements oder der Auswahl von Text beginnt. ondrag: Wird ausgelöst, wenn das Element gezogen wird. ondragend: Wird ausgelöst, wenn der Benutzer das Ziehen und Ablegen eines Elements abgeschlossen hat. ondragleave: Wird ausgelöst, wenn Das mit der Maus gezogene Objekt verlässt den Bereich seines Containers ondragover: wenn ein Dieses Ereignis wird ausgelöst, wenn das gezogene Objekt in den Bereich eines anderen Objektcontainers gezogen wird. Dieses Ereignis tritt auf dem Zielelement ondrop auf: Während eines Ziehvorgangs, this Ereignis wird ausgelöst, wenn die Maus losgelassen wird. Dieses Ereignis wirkt auf das Zielelement

DataTransfer-Objektbezogene Methoden

setData(format,data): Fügen Sie ein benutzerdefiniertes Datenformat hinzu getData(format): Get ein benutzerdefiniertes Datenformat clearData([format]): Löschen Sie das benutzerdefinierte Datenformat und Data

Event.preventDefault()

Diese Methode ist das Standardverhalten, um Ereignisse zu verhindern Wird in Ondragover ausgeführt, andernfalls wird das Ondrop-Ereignis nicht ausgelöst

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

<!DOCTYPE html>     
<html>     
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css">  
            .main{   
                width: 800px;   
                /*border: 1px solid #ccc;*/   
                height: 400px;   
                margin:0 auto;   
            }   
            .left{   
                float: left;   
                width: 25%;   
                background-color: #666;   
                height: 370px;   
                text-align: center;   
                color: black;   
                padding-top:30px ;   
                font-size: 110px;   
            }   
            .right{   
                float: right;   
                width: 69%;   
            }   
            .right ul,.right li{   
               margin: 0;   
               padding: 0;   
            }   
            .right li{   
                list-style: none;   
                border: 2px dashed  #666;   
                background-color: #ddd;   
                height: 60px;   
                margin-top: 3px;   
                text-indent: 30px;   
                line-height: 60px;   
            }   
            .right li:hover{   
                background-color: #ccc;   
            }   
            #message{   
  
                width: 800px;   
                text-align: center;   
                border: 1px solid black;   
                margin: 20px auto;   
                font-size:28px;   
            }   
        </style>  
        <script type="text/javascript">  
            window.onload = function(){   
                var aLi = document.getElementsByTagName(&#39;li&#39;);   
                var oLeft = document.getElementsByClassName(&#39;left&#39;)[0];   
                var oMessage = document.getElementById(&#39;message&#39;);   
  
                for(var i=0;i<aLi.length;i++){   
                    aLi[i].index = i+1;   
                    aLi[i].ondragstart = function(ev){   
                                                //事件对象ev   
                        var evev = ev || event;   
  
                        ev.dataTransfer.setData("Text",this.id);   
                    }   
  
                }   
                oLeft.ondrop = function(ev){   
  
                    var evev = ev || event;   
                    var data = ev.dataTransfer.getData("Text");   
                    var num = document.getElementById(data).index;   
                     document.getElementById(data).remove();   
  
                    oMessage.innerHTML = "列表"+num+"被放进了垃圾箱";   
  
                    this.style.color = "black";   
  
                    }   
                oLeft.ondragover = function(ev){   
                    var evev = ev || event;   
                    ev.preventDefault();   
                }   
                oLeft.ondragenter = function(){   
                    this.style.color = "#fff";   
                }   
            }   
        </script>  
    </head>  
    <body>  
        <div class="main">  
            <div class="left">垃圾箱</div>  
            <div class="right">  
                <ul>  
                    <li id="item1" draggable="true">列表1</li>  
                    <li id="item2" draggable="true">列表2</li>  
                    <li id="item3" draggable="true">列表3</li>  
                    <li id="item4" draggable="true">列表4</li>  
                    <li id="item5" draggable="true">列表5</li>  
                    <li id="item6" draggable="true">列表6</li>  
                </ul>  
            </div>  
            <div style="clear: both;"></div>  
  
  
        </div>  
        <div id="message">拖到垃圾箱删除列表</div>  
    </body>  
</html>

Verwandte Lektüre:

So zählen Sie die Anzahl der Tabellensummen im Bootstrap

So verwenden Sie JS, um zwischen Ausblenden und Anzeigen zu wechseln Symbole gleichzeitig

So implementieren Sie die todolist von vue.js

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Drag-Effekt in H5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So rufen Sie die Kamera mit H5 anNächster Artikel：So rufen Sie die Kamera mit H5 an

In Verbindung stehende Artikel

Mehr sehen