Anzeige
Tutorialbeschreibung

jQuery - Drag&Drop

jQuery - Drag&Drop

Wie heißt es so schön in der deutschsprachigen Wikipedia zum Thema dieses Tutorials: "Drag and Drop, oft auch Drag&Drop oder Drag'n'Drop, deutsch „Ziehen und Fallenlassen“, kurz D&D, ist eine Methode zur Bedienung grafischer Benutzeroberflächen von Rechnern durch das Bewegen grafischer Elemente mittels eines Zeigegerätes". Und genau darum geht es nun. Wie also lassen sich mittels jQuery Anwendungen auf Drag-&-Drop-Basis erstellen?


Was im Desktop-Bereich längst zum Alltag gehört, spielte im Internet bislang eigentlich kaum eine Rolle. Denn das Umsetzen klassischer Drag&Drop-Anwendungen scheiterte immer an zwei Dingen: JavaScript und den Browsern. Erst in letzter Zeit konnte man JavaScript tatsächlich so weit ausreizen, dass Drag&Drop auch in den Browsern nutzbar wurde. Zum Einsatz kamen dabei die beiden Eventhandler onmousemove und onmouseup. Damit entsprechende Anwendungen allerdings wirklich lauffähig sind, muss man sich vergleichsweise gut in JavaScript auskennen. Genau das ist aber oftmals das Problem. An diesem Punkt kommt wieder einmal jQuery ins Spiel. Denn mit diesem Framework lassen sich Drag&Drop-Anwendungen vergleichsweise einfach umsetzen. (In HTML 5 wird es übrigens auch eine entsprechende Funktionalität geben. Wer sich für dieses Thema interessiert, wird unter http://www.whatwg.org/specs/web-apps/current-work/#dnd fündig).

Zunächst ein kleines Beispiel dafür, was man mit Drag&Drop auf seiner Webseite anfangen kann. Ruft ein Besucher die Seite auf, wird zunächst ein normales Rechteck angezeigt.

[Beispiel anzeigen]

Bilder



 
Allerdings handelt es sich hierbei eben nicht um ein einfaches Element. Denn klickt man dieses Element an und hält die Maustaste gedrückt, kann man es innerhalb des Browserfensters bewegen.

Bilder



Wird der Mauszeiger losgelassen, bleibt das Element an der Stelle liegen, an der es losgelassen wurde.

Es gibt ganz unterschiedliche Herangehensweisen, wie man Drag&Drop-Anwendungen erstellen kann. Die wichtigsten Varianten werden in diesem Tutorial vorgestellt. Zunächst der klassische Weg, bevor dann die jQuery-UI-Version vorgestellt wird.


 

Der klassische Weg

Als Erstes wird gezeigt, wie sich Drag&Drop mit einer Kombination aus jQuery und Interface Elements for jQuery nutzen lässt. Bei diesem Interface handelt es sich um eine Sammlung von Komponenten, mit denen sich jQuery-Anwendungen noch einfacher erstellen lassen. Dabei unterstützt Interface verschiedene Dinge wie beispielsweise Tooltipps, scrollbare Bereiche und eben Drag&Drop. Auf der Seite http://interface.eyecon.ro/download können Sie sich selbst die gewünschten Komponenten zusammenstellen. Im vorliegenden Fall sind Draggables und Droppables interessant.

Bilder



 
Im folgenden Beispiel werden drei Textbereiche definiert. Diese können via Drag&Drop in ebenfalls definierte Textfelder verschoben werden.

<body>
<div style="float:left; width:200px;" id="felder">
 <textarea id="feld1" rows="6"></textarea>
 <br />
 <textarea id="feld2" rows="6"></textarea>
 <br />
 <textarea id="feld3" rows="6"></textarea>
 <br />
</div>
<div style="float:left; width:300px;" id="bereiche">
 <div id="drag1" class="dropaccept" style="width:100px; height:100px; background-color:#00CCFF">Bereich 1</div>
 <div id="drag2" class="dropaccept" style="width:100px; height:100px; background-color:#CC6633">Bereich 2</div>
 <div id="drag3" class="dropaccept" style="width:100px; height:100px; background-color:#FF9933">Bereich 3</div>
</div>
</body>

Die Bereiche, die verschoben werden sollen, werden rechts neben den Textfeldern platziert. Entscheidend ist, dass diesen die Klasse dropaccept zugewiesen wird. (Auf diese Klasse wird später im Skript zugegriffen).

Bilder



Damit steht das Grundgerüst der Anwendung. Was nun noch fehlt, ist die eigentliche Funktionalität. Binden Sie dafür das jQuery-Framework auf die bekannte Art und Weise ein.
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

 
Jetzt laden Sie die zuvor heruntergeladene interface.js.
<script type="text/javascript" src="interface.js"></script> 

Anschließend wird das Skript definiert. Im einfachsten Fall könnte das folgendermaßen aussehen:

[Beispiel anzeigen]

<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function()
{
  $('#felder div').Draggable(
     {
      zIndex: 1000,
      ghosting: true,
      revert:  true,
      opacity: 0.7
     }
    );
 
    $('#bereiche textarea').Droppable(
     {
      accept: 'dropaccept',
      tolerance: 'intersect',
      ondrop: function (drag)
 {
 $(this).val($(drag).html());
 }
  }
    );
});
 /* ]]> */
</script>

Verwendet werden hier Draggable() und Droppable(). Die offizielle Dokumentation zu Draggable() finden Sie unter http://interface.eyecon.ro/docs/drag. Die zu Droppable() gibt es auf der Seite http://interface.eyecon.ro/docs/drop. An dieser Stelle werden ausschließlich die im Skript verwendeten Optionen vorgestellt.
  • zIndex – Legt den z-Index-Wert des Elements während des "Hochhebens" fest.
  • ghosting – Durch true wird eine Kopie des Elements bewegt.
  • revert – Wird true als Wert angegeben, fährt das Element am Ende zur Ausgangsposition zurück. Wenn Sie false einsetzen, bleibt das Element an der Stelle liegen, an der der Mauszeiger losgelassen wird.
  • opacity – Hierüber bestimmt man die Transparenz.  

Für Droppable() wurden im gezeigten Beispiel die folgenden Optionen verwendet:
  • accept – Hier wird die CSS-Klasse des Elements erwartet, das mit der gewünschten Funktion ausgestattet werden soll.
  • onDrop – Hierüber wird bestimmt, was nach dem Loslassen des Elements geschehen soll.

Wie üblich müssen Sie diese und die anderen verfügbaren Optionen nicht unbedingt setzen, da – wenn eine Option fehlt – diese intern automatisch mit Standardwerten "gefüllt" wird.


Drag&Drop mit jQuery UI

Im Rahmen von PSD-Tutorials.de gab es bereits eine Einführung in die Arbeit mit jQuery UI. Und eben jenes jQuery UI bietet auch die Möglichkeit,

 
Drag&Drop-Anwendungen
zu erstellen. (Sollten Sie bislang noch keine Erfahrungen mit jQuery UI gemacht haben, finden Sie – neben dem Einsteigertutorial hier auf PSD-Tutorials.de – unter http://docs.jquery.com/UI/ ausführliche Informationen dazu.

Um mit jQuery UI arbeiten zu können, binden Sie zunächst die notwendigen Dateien ein. Dazu kann beispielsweise auf die bekannte Google-API zurückgegriffen werden.
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Anschließend wird das Element definiert, das bewegt werden können soll. Das könnte folgendermaßen aussehen:
<div id="draggable">Bewege mich</div>

Gestaltet wird dieses Element wie üblich mittels CSS.
<style type="text/css">
/* <![CDATA[ */
 #draggable { width: 100px; height: 100px; background: #00CCFF; }
/* ]]> */ 
</style>

Auch hier wieder das Ergebnis:

Bilder



 
Was jetzt noch fehlt, ist das eigentliche Skript. Im einfachsten Fall sieht das folgendermaßen aus:

[Beispiel anzeigen]

<script type="text/javascript">
/* <![CDATA[ */
   $(document).ready(function() {
     $("#draggable").draggable();
   });
/* ]]> */
</script>

Um ein Element mit der Drag&Drop-Funktionalität auszustatten, wird draggable() verwendet. draggable() kennt verschiedene Optionen, Methoden und Events. Einen vollständigen Überblick darüber können Sie sich auf der Seite http://docs.jquery.com/UI/Draggable verschaffen.

Wie üblich ist die Anzahl der angebotenen Varianten recht umfangreich, sie lassen sich aber sehr einfach einsetzen. Angenommen, Sie wollen die Option cursor einsetzen, über die sich das Aussehen des Mauszeigers steuern lässt, nachdem das zu bewegende Element angeklickt wurde.

[Beispiel anzeigen]

<script type="text/javascript">
 /* <![CDATA[ */
   $(document).ready(function() {
     $("#draggable").draggable({ cursor: 'crosshair' });
   });
  /* ]]> */
   </script>

In diesem Fall wird innerhalb der draggable()-Klammern ein Paar geschweifter Klammern gesetzt. Darin wiederum weist man der Option cursor die gewünschte Eigenschaft zu. Im aktuellen Beispiel wurde crosshair verwendet. Alternativ dazu können Sie auch jeden anderen Wert einsetzen, den Sie von der CSS-Eigenschaft cursor her kennen. Einen guten Überblick darüber, welche Eigenschaften möglich sind, finden Sie auf der – übrigens auch sonst sehr empfehlenswerten – Seite http://www.css4you.de/cursor.html.


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von kusnojo
  • 18.07.2011 - 10:32

war sehr hilfreich, danke!

Portrait von AmbIT
  • 14.04.2011 - 02:32

Klein aber fein, ein wirklich nützliches Tutorial!

Portrait von julesxxx
  • 14.12.2010 - 18:27

cool, kann ich wie immer gut gebrauchen ;)

Portrait von UdoH
  • 01.09.2010 - 23:50

danke, hat mir bei einer idee sehr geholfen.

Portrait von 1948
  • 30.08.2010 - 11:42

Super, Habe schon wieder was mit genommen. Danke

Portrait von CP01
  • 28.08.2010 - 21:41

DANKE; KANN MAN IMMER GEBRAUCHEN SOLCHE SACHEN

Portrait von sihoco
  • 28.08.2010 - 12:32

Danke, funktioniert schöner workshop

Portrait von mad_basher
  • 27.08.2010 - 21:14

Und wieder was dazu gelernt!

Portrait von KleIni0708
  • 27.08.2010 - 17:46

alles gut geschrieben!! schöner workshop!!

Portrait von absurt
  • 27.08.2010 - 14:08

Gut beschrieben, es funktioniert!
Merci!

x
×
×