Drag and Drop

Ein Tutorial dazu, wie man mit jQuery UI einfach Drag'n'Drop Elemente erstellt

20.02.2012 Kategorie: jQuery

Drag and Drop mit jQuery

In diesem kleinen Tutorial möchte ich kurz vorstellen, wie einfach es ist mit Hilfe von jQuery und dem Plugin jQueryUI Drag-and-Drop Elemente zu erstellen. Der Übersichtlichkeit zuliebe poste ich hier nur den jQuery Code. Interessierte unter euch können das HTML&CSS-Markup mit Hilfe von Firebug oder Ähnlichem anschauen. Wenn ihr die Beispiele nachbauen wollt, ist es wichtig dass ihr sowohl jQuery, als auch jQueryUI einbindet. Dies könnt ihr zum Beispiel mit Googles API machen:

  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  2.   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
   

Als erstes erstellen wir einen DIV Container der verschiebbar ist. Bitte entschuldigt, dass ich die Codeformatierung nicht überall korrekt mit Einzügen posten kann. Die verwendete Extension hat da ihre Macken.

  1. $( drag );
  2.  
  3. function drag() {
  4. $('.draggable').draggable({
  5.   cursor: "move"
  6. });
  7. }
  8.  

» Demo

Als nächstes lassen wir den Container an einem Raster (20x20 Pixel) ausrichten:

  1. $( drag );
  2.  
  3. function drag() {
  4. $('.draggable').draggable({
  5.   cursor: "move",
  6.   grid: [20,20]
  7. });
  8. }

» Demo

Mit folgendem Code können wird das Drag and Drop Feld eingrenzen. Zudem lassen wir unser DIV am grösseren Container einrasten.

  1. $( drag );
  2.  
  3. function drag() {
  4. $('.draggable').draggable({
  5.   cursor: "move",
  6.   snap: "#container",
  7.   containment: "#container"
  8. });
  9. }

» Demo

Im nächsten Beispiel erstellen wir "Dropzonen", in welchen das DIV abgelegt werden kann. Wird es woanders abgelegt, wird es mit "revert: 'invalid'" wieder an die ursprüngliche Position gebracht. Der letzte Teil des Codes positioniert das DIV bei erfolgreichem Droppen pixelgenau über die Dropzone.

  1. $( drag );
  2. $( drop );
  3.  
  4. function drag() {
  5. $('.draggable').draggable({
  6.   cursor: "move",
  7.   revert: "invalid",
  8.   opacity: 0.7,
  9.   snap: ".droppable",
  10.   snapMode: "inner"
  11. });
  12. }
  13. // Dropzone erstellen
  14. function drop() {
  15. $('.droppable').droppable({
  16.   accept: ".draggable",
  17.   hoverClass: 'hovered',
  18.   drop: positioning
  19. });
  20. }
  21. // Positionieren wenn erfolgreich gedroppt
  22. function positioning( event, ui ) {
  23. position = $(this).position();
  24. ui.draggable.animate({
  25.   opacity: 1,
  26.   top: position.top,
  27.   left: position.left
  28.   }, 200
  29.   );
  30. }

» Demo

Das nächste Beispiel veranschaulicht, wie jQueryUI mit zIndex umgeht. Mittels "stack: '.draggable'" wird bewirkt, dass das momentan gehaltene Element immer in vordester Position ist.

  1. $( drag );
  2.  
  3. function drag() {
  4. $('.draggable').draggable({
  5.   cursor: "move",
  6.   opacity: 0.7,
  7.   stack: ".draggable"
  8. });
  9. }

» Demo

Listen lassen sich mit folgendem Snippet ganz einfach sortierbar machen:

  1. $( sort );
  2.  
  3. function sort() {
  4. $('#sortable').sortable({
  5.   revert: true,
  6.   opacity: 0.8
  7. });
  8. $("ul, li").disableSelection();
  9. }

» Demo

Zu guter Letzt habe ich noch eine Art Warenkorb erstellt. Hier werden einige der vorgestellten Funktionen vereinigt.

  1. $(function() {
  2.   // Drag-Elemente erstellen
  3.     $( "#list li" ).draggable({
  4.       appendTo: "body",
  5.       helper: "clone",
  6.       // Element immer an der selben Stelle des Cursors positioniern
  7.       cursorAt: { cursor: "move", top: 5, left: 0 }
  8.     });
  9.     // Warenkorb als Dropzone und Liste sortierbar machen
  10.     $( "#korb ol" ).droppable({
  11.       activeClass: "ui-state-default",
  12.       hoverClass: "ui-state-hover",
  13.       accept: ":not(.ui-sortable-helper)",
  14.       drop: function( event, ui ) {
  15.         $( this ).find( ".placeholder" ).remove();
  16.         $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
  17.       }
  18.     }).sortable({
  19.       items: "li:not(.placeholder)",
  20.       sort: function() {
  21.         $( this ).removeClass( "ui-state-default" );
  22.         $("ul, li").disableSelection();
  23.       }
  24.     });
  25.     // Zone zum Elemente löschen
  26.     $("#trash").droppable({
  27.   accept: "#korb li",
  28.   hoverClass: 'hovered',
  29.   drop: function( event, ui ) {
  30.         entfernen( ui.draggable );
  31.       }
  32.   });
  33.   });
  34. // Löschen Funktion
  35. function entfernen($item) {
  36.     $item.remove();
  37.   }

» Demo

Ich hoffe ich konnte euch ein wenig näherbringen wie mächtig jQuery mit jQueryUI ist. So lassen sich relativ einfach intuitiv bedienbare Elemente auf Webseiten einbinden. Nähere Informationen findet ihr auf der Webseite von jQueryUI.

Viel Spass beim ausprobieren!

Kommentare

No Name, 07.02.2013:

Sehr gutes Tutorial, vielen Dank hat mir sehr geholfen. Habe diese Seite gleich in meine Lesezeichen eingeordnet.

Schönen Tag noch.

Kommentar hinzufügen
*
CAPTCHA-Bild zum Spam-Schutz

Wenn Sie das Wort nicht lesen können, bitte hier klicken.

*
*