Einführung

Mit jQuery UI kann man HTML Elemente verschiebbar (draggable) machen. Das geht ganz einfach mit:

$(".draggable").draggable({cursor: "move"});

Wird allerdings die Seite neu geladen geht die Information über die aktuelle Position der verschiebbaren Elemente verloren. Folgendes JavaScript Snippet löst das Problem indem es nach dem Verschieben eines Elements die Position in einem Cookie speichert und nach dem Neuladen der Seite die Position wieder ausließt.

jQuery(document).ready(function() {
 
  // cookie period
  var days = 1;
 
  // load positions form cookies
  $(".draggable").each( function( index ){
    $(this).css( "left", 
      $.cookie( "im_" + this.id + "_left") );
    $(this).css( "top", 
      $.cookie( "im_" + this.id + "_top") );
  });
 
  // make draggable, show, bind event
  $(".draggable").draggable({cursor: "move"});
  $('.draggable').show(); 
  $('.draggable').bind('dragstop', savePos);
 
  // save positions into cookies
  function savePos( event, ui ){
    $.cookie("im_" + this.id + "_left", 
      $(this).css("left"), { path: '/', expires: days });
    $.cookie("im_" + this.id + "_top", 
      $(this).css("top"), { path: '/', expires: days });
  }
 
});

Legt man jetzt im HTML Quelltext ein Element mit der CSS-Klasse "draggable" an, wird es verschiebbar und die Position in einem Cookie gespeichert. Nach den Neuladen der Seite wird das Element automatisch an die gespeicherte Position gesetzt. Wichtig ist, dass man dem Element eine eindeutige CSS-Id gibt, da diese verwendet wird um den Cookienamen zu generieren. So können beliebig viele Elemente gespeichert werden:

<div id="postit" class="draggable">drag me!</div>
<div id="pen" class="draggable">and me!</div>

Damit das Ganze funktioniert muss man nur noch jQuery, jQuery UI und das jQuery Cookie Plugin einbinden:

Diese Technik kommt auch auf unserer Webseite zum Einsatz. Finden Sie raus wo!

Jetzt bookmarken: