Was ist die Voraussetzung, um ein Element in abfallbaren Bereich zu verwandeln

Question

Ich frage mich, was als eine gültige ablegen Bereich in Drag & Drop-API in HTML5. Ich habe mehrere Artikel gelesen und jeweils in die Anforderungen sind unterschiedlich:

• bei Leasing drei Event-Handler haben sollte: dragenter, dragover und drop
• draggable=true Attribut von
• sollte gesetzt MIME-Typ entsprechen sollte dataTransfer.setData("text/plain", data)
• sollte dropzone Attribut

Welche davon sind erforderlich? Gibt es noch andere Anforderungen?

Answer 1

Bitte beachten Sie folgendes: http://www.w3schools.com/html/html5_draganddrop.asp

Zu allererst: Um ein Element ziehbar zu machen, setzen die ziehbar Attribut auf true:

<img draggable="true">

Die dataTransfer.setData() Methode legt den Datentyp und den Wert der gezogenen Daten fest:

Geben Sie dann an, was geschehen soll Stift, wenn das Element gezogen wird.

Im obigen Beispiel ruft das Attribut ondragstart eine Funktion auf, drag (event), die angibt, welche Daten gezogen werden sollen.

Die dataTransfer.setData() Methode den Datentyp und den Wert der gezogenen Datensätze:

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

In diesem Fall ist der Datentyp „Text“ und der Wert ist die ID des das ziehbare Element ("drag1").

Das Ereignis ondragover gibt an, wo die gezogenen Daten gelöscht werden können.

Standardmäßig können Daten/Elemente in anderen Elementen nicht gelöscht werden. Um einen Drop zu ermöglichen, müssen wir die Standardbehandlung des Elements verhindern.

Dies wird durch den Aufruf der Event.preventDefault() Methode zur OnDragOver Ereignis gemacht:

event.preventDefault() 

Wenn die gezogenen Daten fallen gelassen wird, kommt es zu einem Drop-Ereignis.

In dem obigen Beispiel ruft das ondrop Attribut eine Funktion, Tropfen (Ereignis):

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