Advitum.de auf Google+

Fotos in Alben ordnen – Drag & Drop mit jQuery

Fotos in Alben ordnen – Drag & Drop mit jQuery
VN:F [1.9.22_1171]
Bewertung: 3.3/5 (15 Stimmen abgegeben)
Von am
Kategorien: jQuery, Tutorials

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.

Fotos in Alben ordnen - Drag & Drop mit jQuery, 3.3 out of 5 based on 15 ratings

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!

Fotos in Alben ordnen - Drag & Drop mit jQuery, 3.3 out of 5 based on 15 ratings

Links zum Thema

Jetzt seid ihr dran!

Teilt eure Meinung mit uns in den Kommentaren, gebt eine Bewertung für diesen Artikel ab und teilt ihn in Social Networks!

Über

Ich bin ein junger Webdesigner und Programmierer aus Siegen und blogge auf Advitum.de über meine Erfahrungen im Web. Meine Themenschwerpunkte liegen im Bereich der Web-Entwicklung mit PHP, JavaScript, HTML und anderen Script-, Programmier- und Markup-Sprachen, der Nutzung von Content Management System wie Typo3, Wordpress etc. und der Effekt-Hascherei mit Photoshop. Seit 2008 blogge ich auf Advitum.de – mal mehr, mal weniger regelmäßig – über alles, was mich so interessiert. Wenn dir mein Blog gefällt, freue ich mich immer sehr über Feedback in Form von Kommentaren und E-Mails.

Kommentare zu diese Artikel

Schreibe jetzt einen Kommentar!

Michael schrieb am Antworten

Hallo Lars,

Ich hab eine Frage: Welche Dateien muss ich zuvor einbinden, damit dein Beispiel von oben funktioniert. Ich habe jetzt dieses Dateien zuvor eingebunden, aber mit denen will es nicht so recht klappen :=(

1) jqueryui.com/latest/ui/jquery-1.3.2.js
2) jqueryui.com/latest/ui/ui.core.js
3) jqueryui.com/latest/ui/ui.draggable.js
4) jqueryui.com/latest/ui/ui.droppable.js

Grüße

    Lars Ebert schrieb am Antworten

    Hallo Michael,

    für die sortable()-Funktion brauchst du meines Wissens auch noch die Datei ui.sortable.js. Ich verwende in meinen Artikeln immer das vollständige Plugin, aber wenn du zusätzlich noch jqueryui.com/latest/ui/ui.sortable.js lädst, müsste es auch so gehen.

Michael schrieb am Antworten

Hallo Lars,

herzlichen Dank für deine Antwort.

Ich hab alles nochmal geprüft und jetzt funktioniert das Drag & Drop Zeugs (freu) . Dennoch habe ich eine Frage an den Fachmann. Hintergrund: Ich möchte einzelne Bilder eines Albums in andere Alben verschieben. Hab dazu auch schon eine Idee, hier der Code:

$(function() {
$(„#bild“).draggable(
{
revert: „invalid“,
zIndex: 1,
opacity: 0.35,
helper: „clone“
});
$(„#album“).droppable({
accept: „#bild“,
tolerance: „pointer“,
hoverClass: „ui-state-hover“,
drop: function( event, ui ) {
$(this)
.find(„p“)
.html(„Dropped!“)
ui.draggable.hide();
},
update: function(event, ui)
{
$.get(„../../../../sortableIndex.php?galleryid=‘.$_GET[‚galleryid‘].’&“ + $(this).draggable(„serialize“));
}
});
});

Lars, die Update-Anweisung steht doch an der falschen Stelle, nicht wahr? Die muss doch bestimmt in den drop-Klammerblock? Jetzt hab ich schon einiges versucht, leider geht dabei irgendwas schief. Hättest Du nicht eine Idee, wie man die Anweisung integriert.

zweite Teil meiner Frage. Du hattest ja in deinem Beitrag „sortable“ geschrieben, dass das id-Element durch einen Unterstrich getrennt werden muss, damit man nachher mit php in einer foreach-Schleife die Werte in die Tabelle zurückschreiben kann. Diese Systematik müsste man ja dann schließlich auch auf die Bilder und die verschiedenen Alben anwenden. Folgerichtig wende ich die Funktion $(this).draggable(„serialize“) auch auf die $(this).droppable(„serialize“) an und verknüpfe die mit einem „+“? Ist das richtig kombiniert. Dann müsste ich doch die Id des Bildes und die Id des gewählten Albums bekommen und könnte mit php darauf reagieren. Oder ist die Funktion serialize nicht die richtige Fkt.?

Grüße

    Lars Ebert schrieb am Antworten

    Um die Bilder auch auf dem Server oder in der Datenbank zu verschieben, können wir weder „update“ noch „serialize“ verwenden.

    Der Schlüssel hierzu ist die drop-Funktion. Hier muss alles ausgeführt werden, was zum Verschieben des Bildes nötig ist. In diesem Fall müsste also zum einen ein Ajax-Request an den Server abgesetzt werden, damit der Server in der Datenbank die Position des Bildes ändert, zum anderen muss innerhalb der HTML-Struktur der Alben das Bild in das neue Album verschoben werden.

    Der Ajax-Request innerhalb der drop-Funktion könnte zum Beispiel so aussehen:

    $.get("movephoto.php?photoid=" + photoid + "&newalbum=" + newalbum);

    Die Variable photoid könntest du mit ui.draggable.attr('id') aus dem id-Attribut des Bildes auslesen (natürlich musst du es dann vorher auch bei der Ausgabe der Bilder gesetzt haben), die Id des neuen Albums könntest du mit bei $(this) auslesen.

    In dem PHP-Script muss dann die Foto-ID und die Album-ID abgefragt werden und das Foto in das Album verschoben werden.

    Um das Bild auch beim Nutzer in das neue Album zu verschieben, könntest du folgendes JavaScript benutzen:

    var $list = $($(this).find('a').attr('href'));
    ui.draggable.hide('slow', function()
    {
    $(this).appendTo($list);
    $(this).show('slow');
    });

    Ich hoffe, das hilft dir jetzt erstmal weiter.

      Michael schrieb am Antworten

      Hi Lars,

      und nochmal Danke.

      Hab jetzt ein wenig ausprobiert und siehe da es klappt. Mehr ist das nicht? – Krass:

      An dieser Stelle folge ich deinem Aufruf von oben: „Was stellt ihr mit jQuery und jQuery-UI so an.“

      Mein Ziel:
      1 Nutzer hat z.B. 3 Alben. Ich lade immer nur die Bilder eines Albums. Für die restlichen Alben setze ich jeweils erst mal ein Rechteck. Der Nutzer soll nun die Bilder in ein anderes Album zu verschieben können.

      Hier mein html:

      $content .= '<div class="demo">';
      $content .= '<div id="bilder" name="12">';
      $content .= '<p id="photo_1">Bild 1</p>';
      $content .= '<p id="photo_2">Bild 2</p>';
      $content .= '</div>';
      $content .= '<div class="album" name="1">';
      $content .= '<p>Ablum 1</p>';
      $content .= '</div>';
      $content .= '<div class="album" name="2">';
      $content .= '<p>Ablum 2</p>';
      $content .= '</div>';
      $content .= '</div><!-- End demo -->';

      mein Javascript sieht so aus:

                  	$(function() {
                  		$("#bilder p").draggable(
                          {
                          	revert: "invalid",
                          	zIndex: 1,
                          	opacity: 0.35,
                          	helper: "clone"
                          });
                  		$(".album").droppable({
                          	accept: "#bilder p",
                          	tolerance: "pointer",
                          	hoverClass: "ui-state-hover",
                  			drop: function( event, ui ) {
                  				$(this).html("Dropped!");
                  				$(this).attr("name");
                      		    ui.draggable.hide();
                                  var photoid = ui.draggable.attr("id");
                                  var newalbum = $(this).attr("name");
                                  $.get("../../../../movephoto.php?photoid=" + photoid + "&newalbum=" + newalbum);
                  			},
                  		});
                  	});

      Ich habe mir überlegt, dass ich beim neuen Album das Attribut „name“ für meine galleryid benutze. Das ist doch okay, oder?

      Ich habe den php-Teil noch nicht fertig. Ich habe aber überprüft, ob mein Ajax-Request die notwendigen Parameter liefert (hab mir in einer Mail die URL geschickt) und siehe da, die Werte kommen tatsächlich. Echt geil.

      Ha, ich hab noch ne Frage:

      Du schriebst: „Um das Bild auch beim Nutzer in das neue Album zu verschieben, könntest du folgendes JavaScript benutzen:“

      Ich bin der Meinung, dass ich das überspringen kann. Mein Nutzer sieht ja immer nur die Bilder eines Albums. Wechselt er das Album lade ich das Album neu. Deinen Vorschlag nutzt man, wenn man mehrere Alben gleichzeitig anzeigt und man den Wechsel der Bilder von Album 1 zu 2 sichtbar machen muss, richtig?

      Diese Technik, kann man ja auf verschiedenste Dinge im Leben anwenden. Krass.

      Lars, kennst Du nicht noch einen Link für nen Hochladen-Drag & Drop Dialog (man muss mehrere Dateien hineinziehen können).

      Wie schon erwähnt, deine Artikel finde ich sehr gut! – Mach weiter so!

      Beste Grüße

        Lars Ebert schrieb am Antworten

        Das sieht doch sehr gut aus! In der Tat ist es für mich nur nötig, die Bilder auch beim User direkt zu verschieben, weil ich die Alben als jQuery-Tabs anzeige und der Nutzer ohne Neuladen der Seite alle Alben einsehen kann. Bei dir ist dieser Schritt dann unnötig.

        Dateiupload per Drag&Drop ist ein heikles Thema. Ich habe eine Java-Lösung gefunden, werde mich aber mit der Sache noch weiter beschäftigen:
        http://www.radinks.com/upload/

          Daniel schrieb am

          Hey Lars,
          tolle Arbeit. Mir hat der Artikel gerade einige Stunden arbeit erspart um mich selbst da durch zu wühlen. Für die Drop-Funktion, also das verschieben habe ich einfach mit appendTo gearbeitet, sollte völlig reichen. Vielleicht hilft das anderen Leuten, hier ein Beispiel:

          drop: function(ev, ui){
          //ui.draggable.hide();
          ui.draggable.appendTo($(this));
          ui.draggable.attr(‚id‘);//ID des Bildes
          }

          Herzliche Grüße,
          Daniel

Jenni schrieb am Antworten

Hi Lars,
dank deiner Einleitung habe ich versucht selber ein Drag and Drop zu programmieren.
Allerdings möchte ich die Einzelnen Bilder einfach nur auf ein anderes Bild ziehen können. Leider funktioniert es nicht.
Ich finde den Fehler nicht. Könntest du mir helfen?
Grüße

$('.Teile img'). draggable(
{
    revert:'invalid',
    z-index:1,
    opacity: 0.35,
    helper:'clone' 
});
$('.Hintergrund img'). droppable(
{
    accept:'.Teile img'
    tolerance:'pointer',
    hover Class:'ui-state-hover',
    drop: function (ev, ui)
    {
        ui.draggable.hide();
    }
});
    Lars Ebert schrieb am Antworten

    Hallo Jenni,

    soweit ich das sehe, sollte das soweit richtig sein, aber bei hoverClass darf kein Leerzeichen dazwischen sein.

    Klappt es jetzt?

    Grüße, Lars

Michael schrieb am Antworten

Hallo Lars,

Frage: Kennst Du ein Script bei dem drag & drop & sort zusammen funktioniert?

VG Michael

    Lars Ebert schrieb am Antworten

    Hallo Michael,

    leider gibt es ein solches Script nicht fertig im Netz, allerdings ist die Umsetzung gar nicht schwer, zwei Komponenten sind dafür nötig:

    1. Bilder in Ordner/Alben ziehen -> Hier muss das JavaScript dafür sorgen, dass das Bild sowohl auf dem Server als auch beim Nutzer in den Ordner verschoben wird.

    2. Sortable-Funktion in den einzelnen Alben -> Hier geht man vor wie in diesem Artikel: http://advitum.de/blog/2011/01/jquery-ui-intuitive-interaktion-zwischen-nutzer-und-anwendung/. Diese Komponente muss nur dafür sorgen, dass die Reihenfolge auf dem Server gespeichert wird.

    Diese beiden Komponenten arbeiten (was mich anfangs auch echt überrascht hat) nahtlos zusammen.

    Viel Erfolg bei der Umsetzung,

    Lars

Diese Artikel könnten dir auch gefallen