Implementierungscode des HTML5-Drag-and-Drop-Effekts-H5-Tutorial-php.cn

Implementierungscode des HTML5-Drag-and-Drop-Effekts

黄舟

Freigeben： 2017-02-21 13:11:20

Original

1394 Leute haben es durchsucht

Drag and Drop

Drag and Drop ist eine häufige Funktion, bei der ein Objekt gegriffen und später an einen anderen Ort gezogen wird.

In HTML5 gehört Drag & Drop zum Standard und jedes Element kann per Drag & Drop verschoben werden.

Internet Explorer 9+, Firefox, Opera, Chrome und Safari unterstützen das Ziehen.

Hinweis:Safari 5.1.2 unterstützt kein Ziehen.

Beispiel:

<!DOCTYPE html>  
<html>  
<head>  
    <title>拖放</title>  
    <style type="text/css">  
        #p1{width:360px;height:220px;padding:20px;border:1px solid black;}  
    </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 id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>  
    <br />  
    <img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)"  width="300px" height="180px" />  
</body>  
</html>

Nach dem Login kopieren

Um das Element ziehbar zu machen, setzen Sie zunächst das dragable-Attribut auf true:

Geben Sie dann an, wann das Element gezogen wird , was geschieht.
Im obigen Beispiel ruft das ondragstart-Attribut eine Funktion, Drag(event), auf, die die zu ziehenden Daten angibt.
dataTransfer.setData()-Methode legt den Datentyp und den Wert der gezogenen Daten fest:

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

Nach dem Login kopieren

In diesem Beispiel , der Datentyp ist „Text“ und der Wert ist die ID des ziehbaren Elements („drag1“).

ondragover-Ereignis gibt an, wo die gezogenen Daten platziert werden sollen.
Standardmäßig können Daten/Elemente nicht in anderen Elementen platziert werden. Wenn wir die Platzierung zulassen müssen, müssen wir die Standardbehandlung des Elements verhindern.
Dies geschieht durch Aufrufen der event.preventDefault()-Methode des ondragover-Ereignisses : event.preventDefault()

Wenn die gezogenen Daten platziert werden, Es kommt zu einem Drop-Ereignis.
Im obigen Beispiel ruft das Ondrop-Attribut eine Funktion auf, drop(event):

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

Nach dem Login kopieren

Code-Erklärung:

Rufen Sie preventDefault() auf, um die Standardverarbeitung von Daten durch den Browser zu verhindern (das Standardverhalten des Drop-Ereignisses besteht darin, es als Link zu öffnen)
über dataTransfer.getData ("Text")-Methode , um die gezogenen Daten zu erhalten. Diese Methode gibt jeden Datensatz in den gleichen Typ wie in der setData()-Methode zurück.
Die gezogenen Daten sind die ID des gezogenen Elements ("drag1")
Das gezogene Element an das Platzierungselement (Zielelement) anhängen

Vor und zurück ziehen:

Wenn Sie zwischen zwei Stellen hin und her ziehen möchten, ändern Sie einfach den obigen Code leicht.
Ändern Sie den Code im Textkörper in:

<body>  
    <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">  
    <img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)"  width="300px" height="180px" /></p>  
    <p id="p2" ondrop="drop(event)" ondragover="allowDrop(event)"></p>  
</body>

Nach dem Login kopieren

Dann fügen Sie #p2 zum Stil hinzu:

<style type="text/css">  
        #p1,#p2{width:360px;height:220px;padding:20px;border:1px solid black;}  
    </style>

Nach dem Login kopieren

Auf diese Weise können Sie per Drag & Drop hin und her ziehen.

Das Obige ist der Inhalt des HTML5-Drag-and-Drop-Effekts. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

Implementierungscode des HTML5-Drag-and-Drop-Effekts