Heim > Artikel > Web-Frontend > Teilen Sie einen Beispielcode für die Implementierung von Drag-and-Drop in HTML5

Teilen Sie einen Beispielcode für die Implementierung von Drag-and-Drop in HTML5

零下一度Original: 2017-05-04 15:36:471950Durchsuche

In html5 wird Drag & Drop unterstützt API Schnittstelle Durch diese Funktion können Daten per Drag & Drop zwischen dem Browser und anderen Anwendungen verschoben werden Um diesen Vorgang zu erreichen, müssen Sie die folgenden zwei Schritte ausführen
(1) Setzen Sie das ziehbare -Attribut des -Objekts , das Sie per Drag & Drop verschieben möchten, auf „true“. Auf diese Weise kann das Tag per Drag & Drop verschoben werden. Außerdem müssen das img-Tag und das a-Tag als „true“ angegeben werden, und Drag & Drop ist standardmäßig zulässig.
(2) Schreiben Sie Ereignisverarbeitungs- Code für Drag & Drop. Häufig verwendete Wiedergabeereignisse sind wie folgt:
Dragstart startet den Drag & Drop-Vorgang
Drag Während des Drag & Drop-Vorgangs ,
Dragenter ist Das gezogene Etikett beginnt, in den Geltungsbereich dieses Etiketts einzutreten
Dragover Das gezogene Etikett bewegt sich innerhalb des Geltungsbereichs dieses Etiketts
Dragleave Das gezogene Etikett verlässt den Geltungsbereich dieses Etiketts
Drop Dort Werden andere Beschriftungen gezogen? Platzieren Sie es in diesem Tag
dragend Der Drag-and-Drop-Vorgang endet

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>拖放</title>
<script type="text/javascript">
function init() 
{
    // (1) 拖放开始
    source.addEventListener("dragstart", function(ev) 
    {
       //(1) 向dataTransfer对象追加数据
        var dt = ev.dataTransfer;
        dt.effectAllowed = &#39;all&#39;;    
       //(2) 拖动元素为dt.setData("text/plain", this.id); 
        dt.setData("text/plain", "你好"); 
    }, false);
      // (3) dragend：拖放结束
    dest.addEventListener("dragend", function(ev) 
    {
        //不执行默认处理（拒绝被拖放）
        ev.preventDefault();
     }, false);
    // (4) drop:被拖放
    dest.addEventListener("drop", function(ev) 
    {
        // 从DataTransfer对象那里取得数据
        var dt = ev.dataTransfer;
        //(5) 不执行默认处理（拒绝被拖放）
        ev.preventDefault();
        //停止事件传播
        ev.stopPropagation();
    }, false);
}
</script>
</head>
<body onload="init()">
<h5>请拖放</h5>
</html>

Im obigen Code wird das inint()-Ereignis automatisch ausgelöst, wenn die Seite geöffnet wird geladen ist. Dieses Ereignis umfasst drei Funktionen: Starten des Ziehens, Ziehen und Ablegen und Beenden des Ziehens. Öffnen Sie die Webseite im Browser, ziehen Sie die Maus, um die Abendbilder auf der Webseite anzuzeigen, und die Webseite lädt automatisch den erforderlichen Inhalt.

[Verwandte Empfehlungen]

1. Kostenloses h5-Online-Video-Tutorial

2. HTML5-Vollversionshandbuch

3. php.cn Original-HTML5-Video-Tutorial

Das obige ist der detaillierte Inhalt vonTeilen Sie einen Beispielcode für die Implementierung von Drag-and-Drop in HTML5. 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：Beispielcode für die Aufnahme von Standbildern aus Videos mit HTML5Nächster Artikel：Beispielcode für die Aufnahme von Standbildern aus Videos mit HTML5

In Verbindung stehende Artikel

Mehr sehen