Facebook Twitter Delicious RSS Tumblr StumbleUpon Buzz

Fotos in Alben ordnen – Drag & Drop mit jQuery

Fotos in Alben ordnen – Drag & Drop mit jQuery - Lead Image

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!

Links zum Thema

VN:F [1.9.15_1155]
Bewertung: 5.0/5 (2 Stimmen abgegeben)
Fotos in Alben ordnen - Drag & Drop mit jQuery, 5.0 out of 5 based on 2 ratings

Über den Autor:

Ich bin ein junger Webentwickler und Programmierer aus Iserlohn. Mit PHP, HTML etc. bin ich praktisch aufgewachsen. Seit 2010 blogge ich auf Advitum.

Facebook, Twitter & Kommentare:

12 Kommentare zu “Fotos in Alben ordnen – Drag & Drop mit jQuery”

  1. Michael
    Antworten
    3. Mai 2011 um 16:15

    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
      Antworten
      3. Mai 2011 um 19:24

      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.

  2. Michael
    Antworten
    3. Mai 2011 um 22:15

    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
      Antworten
      4. Mai 2011 um 17:23

      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
        Antworten
        5. Mai 2011 um 00:29

        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
          Antworten
          5. Mai 2011 um 06:54

          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/

  3. Jenni
    Antworten
    11. Juli 2011 um 11:50

    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
      Antworten
      11. Juli 2011 um 14:51

      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

  4. Michael
    Antworten
    5. August 2011 um 00:13

    Hallo Lars,

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

    VG Michael

    • Lars Ebert
      Antworten
      5. August 2011 um 08:03

      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://www.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

  5. Pingback von jQuery UI – intuitive Interaktion zwischen Nutzer und Anwendung « Blog « Advitum Webdesign

    22. Januar 2011 um 15:52

    [...] meinem Artikel »Fotos in Alben ordnen – Drag & Drop mit jQuery« bin ich schon auf das Einordnen von Elementen in Kategorien oder Ordner [...]

  6. Pingback von jQuery: Bilder zuschneiden direkt im Browser « Blog « Advitum Webdesign

    17. Februar 2012 um 11:09

    [...] Fotos in Alben ordnen – Drag & Drop mit jQuery [...]

Hinterlasse eine Antwort

XHTML: Diese Tags kannst du nutzen

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>