HTML5 - Drag & Drop, Teil 2

Bereits im ersten Teil dieses Tutorials haben wir gesehen, wie man die Ereignis ziehen des Ziehens der Elemente, das heißt, wir haben einen Teil der Arbeit gemacht, wir haben gesehen, wie wir mit den verschiedenen Ereignissen dieses ersten Abschnitts interagieren.
Jetzt müssen wir wissen, wie wir den Bereich aktivieren, in dem das Element abgelegt werden soll. Dies ist bereits die ergänzende Aktion, die es uns ermöglicht, vollständige Funktionalitäten auf unserer Seite zu erreichen.
Erstellen des Einzahlungsbereichs
Dies ist der Bereich, in dem wir die Elemente, die wir ziehen, verlassen werden. Um diesen Bereich zu manipulieren, werden wir mehrere Ereignisse haben, um besser zu verstehen, wie man mit diesen Ereignissen umgeht, werden wir jedes einzelne auflisten und erklären, wie es funktioniert .
Ereignisse (Bearbeiten)

• Dragenter: Es wird aktiviert, wenn ein gezogenes Element in den von uns für den Ablagebereich definierten Platz auf dem Bildschirm eindringt.
• Drüber ziehen: Er wird ausgelöst, wenn sich das gezogene Element innerhalb des von uns bereits definierten Ablagebereichs bewegt.
• Schleppblatt: Sie wird in dem Moment aktiviert, in dem ein gezogenes Element den Ablagebereich verlässt.
• Tropfen: Es ist das Ereignis, das aktiviert wird, wenn ein Artikel im Einzahlungsbereich zurückgelassen wird.

Empfang des Artikels
Sobald wir wissen, welche Ereignisse uns zur Verfügung stehen, erstellen wir einen einfachen Code, in dem ein gezogenes Element beim Ablegen oder Ablegen im Ablagebereich angezeigt wird.
Dazu verwenden wir einige Funktionen des innerer HTML-Code wo wir das Element klonen, das in den Bereich geworfen wird.
Sehen wir uns den Beispielcode an:

 Beispiel  
Hier abstellen

Wenn wir genau hinschauen, definieren wir das Zielelement als das Element, das den Ablagerungsbereich enthält. Sobald dies geschehen ist, definieren wir, was in jedem der Ereignisse passieren wird, wenn wir uns die Ereignis fallen lassen Hier erfolgt der letzte Schritt, hier werden wir das gezogene Element klonen und dank der innerer HTML-Code wir werden es asynchron anzeigen, wenn wir das Element ablegen, das wir gezogen haben.
Eine andere Sache, auf die wir achten müssen, ist das Überschreiben des Standardereignisses des Browsers, wir verwalten dies beim Erstellen der Funktion GriffZiehenAuf diese Weise verhindern wir, dass der Browser die Anweisungen in einer von uns nicht erwarteten Weise interpretiert.
In unserem Browser sollte es so aussehen:

Wir haben es endlich geschafft, einen zu machen ziehen und loslassen in HTML5 ohne auf externe Bibliotheken angewiesen zu sein, können wir jetzt mit ein wenig Fantasie viele Funktionalitäten erstellen, wie zum Beispiel einen Warenkorb, der nur mit funktioniert ziehen und loslassen.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben