Fotos in Alben ordnen - Drag & Drop mit jQuery

jQuery hat das Leben vieler Web Entwickler drastisch vereinfacht. Das JavaScript-Framework bietet die wichtigsten Funktionen für eine gute Benutzeroberfläche.

In diesem Artikel möchte ich euch die Umsetzung von Drag & Drop anhand eines einfachen Beispiels verdeutlichen.

Zunächst wollen wir uns einmal den HTML -Code für die Alben und Fotos anschauen:

<ul id="albums">
	<li>
		Ein Album
	</li>
	<li>
		Anderes Album
	</li>
</ul>
<div id="photos">
	<img src="http://example.com/image.jpg" alt="" />
	<img src="http://example.com/image.jpg" alt="" />
</div>

Jetzt wollen wir es dem User unserer Anwendung ermöglichen, die Fotos einfach durch Klicken und Ziehen in ein Album zu verschieben. Dazu brauchen wir als erstes die »Drag & Drop«-Funktionalität, die uns das jQuery-Plugin jQueryUI bietet. Wir verwenden hier die Funktion »draggable()«, um die Bilder beweglich zu machen.

$('.photos img').draggable(
{
	revert: 'invalid',
	zIndex: 1,
	opacity: 0.35,
	helper: 'clone'
});

Die Option »revert« sorgt mit dem Wert »invalid« dafür, dass die Fotos zu ihrer Position »zurückschnacken«, wenn sie nicht auf ein Album gezogen werden, mit »helper: 'clone'« sorgen wir dafür, dass nur eine Kopie des Bildes durch die Gegend gezogen wird. Das ist aber eigentlich nur optischer Schnick-Schnack.

Als nächstes sorgen wir dafür, dass die Fotos auch auf die Alben gezogen werden können. Dass machen wir mit der Funktion »droppable()«.

$('#albums li').droppable(
{
	accept: '.photos img',
	tolerance: 'pointer',
	hoverClass: 'ui-state-hover',
	drop: function(ev, ui)
	{
		ui.draggable.hide();
	}
});

Bei »accept« trage ich ein, welche Elemente in die Alben gezogen werden können. In diesem Fall sind das natürlich die Fotos. Spannend wird es in Zeile 8. Dort kann ich jetzt beliebiges JavaScript einfügen, um zu definieren, was beim Fallen-lassen eines Bildes geschehen soll.

Hier könnten wir jetzt zum Beispiel einen Ajax-Request absenden, der dafür sorgt, dass das Foto in ein anderes Album kopiert wird. Ich habe mich aber erst einmal, um diese Tutorial kompakt zu halten, darauf beschränkt, das Foto einfach zu verstecken.

Weiter denken

An diesem Punkt geht es natürlich noch weiter. Mit ein wenig CSS, etwas mehr JavaScript und einer ganzen Menge PHP habe ich zum Beispiel hieraus eine ganze Fotoalbum-Anwendung geschrieben. Aber das ist, wie gesagt, ziemlich viel Aufwand und viel zu viel für ein Tutorial. Aber vielleicht liefere ich ja in anderen Tutorials noch mehr nach. Das kommt drauf an, wie viel Anklang dieses Tutorial findet.

Ich kenne inzwischen auch viele andere Anwendungsmöglichkeiten für diese Technik. Ich habe damit zum Beispiel schon einen Papierkorb für eine Anwendung programmiert. In Kombination mit der Sortable-Funktion von jQuery-UI ergeben sich sogar noch viel weitreichendere Anwendungsgebiete für diese Technik.

Mithilfe von jQuery und jQuery-UI lassen sich schon jetzt sehr intuitive Benutzeroberflächen im Internet schaffen und ich denke, dass dadurch die Usability im Internet weiter zunehmen wird.

Was sagt ihr dazu?

Welche Anwendungsmöglichkeiten seht ihr für diese Technik(en)? Was stellt ihr mit jQuery und jQuery-UI so an. Was ist eure Meinung? Teilt sie mir mit und schreibt mit einen Kommentar!