Startseite>Webdesign-Tutorial>HTML-Tutorial

Detaillierte Erläuterung und Instanzcode von HTML5

Autor：Eve Cole Aktualisierungszeit：2025-02-04 12:24:01
Kurze Einführung

Drag & Drop ist ein häufiges Merkmal, dh ziehen nach dem Erfassungsobjekt zu einer anderen Position.

In HTML5 ist Drag & Drop ein Standardteil, und jedes Element kann gezogen und fallen gelassen werden.

Klicken Sie zuerst auf ein kleines Beispiel: Führen Sie JavaScript aus, wenn der Benutzer beginnt, <p> Elemente zu ziehen

 <p draggable = true Ondragstart = MyFunction (Ereignis)> Ziehen Sie mich!

Tipp: Links und Bilder werden standardmäßig gezogen und benötigen keine draggierbare Eigenschaft.

Definition und Verwendung

Die folgenden Ereignisse werden während des Drag & Drop -Prozesss ausgelöst:

  • Lösen Sie das Ereignis (Quellelement): ONDRAGSTART -URER -URER -Wenn der Benutzer beginnt, das Element zu ziehen
    • ONDRAGE -Element wird beim Ziehen ausgelöst
    • ONDRAGEND -User -Vervollständigung Element Drag Trigger
  • Ereignis ausgelöst bei der Freilassung des Ziels: ONDRAGERN -Wenn das von der Maus gezogene Objekt in den Container eingreift, löst es dieses Ereignis aus
    • ONDRAGOVER -Wenn ein gezogenes Objekt im Bereich eines anderen Objektbehälters gezogen wird, löst es diesen Vorfall aus
    • ONDRAGLEAVE -Legen Sie diesen Vorfall aus, wenn das von der Maus gezogene Objekt den Behälter verlässt
    • ONDROP -DRUCKEN SIE DIE EREIGUNGSETEN, WENN DIE MOUSE -Taste veröffentlichen
Browserunterstützung

Internet Explorer 9+, Firefox-, Opera-, Chrome- und Safari -Unterstützung.

HINWEIS: Safari 5.1.2 unterstützt den Drag nicht.

Beispiel

Veröffentlichen Sie zuerst den Code und erklären Sie dann eins nacheinander:

 <! Grenze: 1PX Solid #aaaaaaa;} </style> </head> <body> <p> Ziehen Sie img_w3slogo.gif Bild zum rechteckigen Box: </p> <div1 = div1 Ondrop = Drop (Ereignis) ONDRAGOVER = DELDDROPDROP (Sogar t)> </div> <br> <img id = drag1 src = bilder/img_w3slogo. Ev.preventDefalt ();} Funktion Drag (ev) {ev.datatransfer.setData (text, ev.target.id); ;

Der Effekt der Seite vor dem Ziehen ist:

Lassen Sie uns die Bedeutung des folgenden Code unten analysieren.

Setzen Sie das Element kann gezogen und fallen gelassen werden

Um das Element gezogen zu werden, stellen Sie zunächst die draggierbare Eigenschaft auf true:

 <Img draggable = true>
Was zu drag-ondriagstart und setdata ()

Es wird dann angegeben, was passiert, wenn das Element gezogen wird.

Im obigen Beispiel ruft die Ondragstart -Eigenschaft eine Funktion, Drag (Ereignis), die die gezogenen Daten angibt.

DataTransfer.setData () -Methode legen Sie den Datentyp und den Wert der Datenschleppdaten fest:

 Funktion Drag (ev) {ev.datatransfer.setData (text, ev.target.id);}

In diesem Beispiel ist der Datentyp Text und der Wert ist ID (Drag1), der das Element ziehen kann.

Wo kann man IT-DRAGOVOVERSPRÜFEN

Das ONDRAGOVER -Ereignis sieht vor, wo die gezogenen Daten platziert werden sollen.

Standard, Daten/Elemente können nicht in andere Elemente platziert werden. Wenn Sie die zulässige Platzierung festlegen müssen, müssen wir die Standardverarbeitung von Elementen verhindern.

Dies soll das Ereignis aufrufen.

 Event.PreventDefault ()
Putting-Drop

Wenn die Ziehendaten platziert werden, erfolgt das Drop -Ereignis.

Im obigen Beispiel ruft das ONDROP -Attribut eine Funktion auf, Drop (Ereignis):

 Funktion Drop (ev) {ev.preventDefault ();

Code Erläuterung:

  • Rufen Sie die Verhinderungdefault () an, um die Standardverarbeitung der Daten durch den Browser zu vermeiden (das Standardverhalten des Drop -Ereignisses wird in einer Link geöffnet)
  • Holen Sie sich die gezogenen Daten über die Methode DataTransfer.getData (Text). Diese Methode kehrt zu Daten desselben Typs in der Methode setData () zurück.
  • Ziehendaten sind die ID des Ziebelements (Drag1)
  • Zusätzliches Ziehenelement zum Platzierungselement (Zielelement)

Die Ergebnisse der Implementierung sind wie in der Abbildung dargestellt:

DataTransfer -Objekt

Während des Drag -Vorgangs können wir das DataTransfer -Objekt verwenden, um die Daten zu übertragen, um andere Vorgänge für die Daten auszuführen, wenn der Drag -Vorgang vorbei ist.

Objektattribut:

  • DROPEffect: Setzen oder geben Sie das Drag & Drop -Verhalten, das am Drag -and -Drop -Ziel auftritt. Wenn das hier festgelegte Drag & Drop -Verhalten nicht mehr in den verschiedenen Drag & Drop -Verhaltenseinstellungen, die von den Effectalowed -Attributeinstellungen festgelegt wurden, schlägt der Drag & Drop -Betrieb fehl. Dieser Attributwert ist nur einer der vier Werte von Null, Kopieren, Link und Verschieben.
  • Effectalowed: Stellen Sie das Drag -Verhalten, das das Dragelement zulässt, ein oder retreiben Sie das Dragelement. Dieser Attributwert kann auf keine festgelegt werden, kopy, copyLink, copymove, link, linkMove, move, alle und nicht initialisiert.
  • Elemente: Dieses Attribut gibt das DataatRansferitems -Objekt zurück, das die Drag -Daten darstellt.
  • Typen: Dieses Attribut gibt ein DomStringList -Objekt zurück, das alle in DataTransfer gespeicherten Datenarten enthält.
Objektmethode:

  • SETDATA (Format, Daten): Weisen Sie die Daten im angegebenen Format dem DataTransfer -Objekt zu.
  • GetData (Format): Holen Sie sich die Daten im angegebenen Format aus dem DataTransfer -Objekt, das Format repräsentiert das Datenformat, Daten sind Daten.
  • Cleardata ([Format]): Löschen Sie die Daten des angegebenen Formats aus dem DataTransfer -Objekt.
  • AddElement (Element): Benutzerdefiniertes Symbol hinzufügen
  • SetDagimage (Element, x, y): Stellen Sie das benutzerdefinierte Symbol des Drag & Drop -Betriebs ein. Unter ihnen setzt Element ein benutzerdefiniertes Symbol, x legt den Abstand zwischen dem Symbol und der Maus in horizontaler Richtung und den Abstand zwischen dem Symbol und der Maus in vertikaler Richtung.
Identifizieren Sie, was angezogen ist

 Funktion dragStart_handler (ev) {console.log (DragStart); = p1 draggable = true Ondragstart = DragStart_handler (Ereignis);> Dieses Element ist gezogen
Definieren Sie die Daten des Drag

 Funktion dragStart_handler (ev) {// Fügen Sie die Dragdaten hinzu. ;
Definieren Sie das Drag -Bild

 Funktion dragstart_handler (ev) {// ein Bild erstellen und dann für das Drag -Bild. ();
Definieren Sie den Drageffekt

 Funktion Dragstart_handler (ev) {// Setzen Sie den Drag -Effekt, um ev.datatransfer.dropeffect = Copy;} zu kopieren
Definieren Sie eine Tropfenzone

 Function dragover_handler (ev) {ev.preventDefault (); Element zum Ziel des Ziels = ev.datatransfer.getData (Text); div> </body>
Firefox -Browser -Draging -Problem

Aber gehen Sie hierher und finden Sie ein Problem im Firefox -Browser:

Der Widerstand von HTML5 verwendet PreventDefault, um zu verhindern, dass die Pop -up -Seite auftaucht, funktioniert jedoch nicht unter Firefox?

Lösung:

 document.body.ondrop = function (event) {event.preventDefault ();

Oder für das obige Beispiel ist es auch möglich, die ONDROP -Methode hinzuzufügen:

 Funktion Drop (ev) {ev.preventDefault ();

Das oben genannte ist der Inhalt dieses Artikels.

Ähnliche Artikel