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

1425 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)!