jQuery UI: Droppable Tutorial

Im letzen Artikel wurde beschrieben wie Objekte wie beispielweise ein div-Container mit draggable bewegt bzw. verschoben werden können. Mit der Funktion droppable kann darauf reagiert werden und ein bestimmtes Ereignis ausgelößt werden wenn ein Objekt in ein anderes verschoben oder auch abgelegt wird. Hierzu wird das jQuery und jQuery UI Framework benötigt. Zu Anfang muss ein Objekt erstellt werden das bewegt werden kann. Dieses geht wie im Draggable Tutorial beschrieben über die Funktion draggable();. Anschließend muss ein Objekt festgelegt werden das beim Drag In bzw. beim Ablegen des Objekt ein Event auswirft, dieses geht über die Funktion droppable() bzw. drop: function().

<script type="text/javascript">
  $(document).ready(function(){
    $("#dragMe").draggable();
    $("#dropArea").droppable({
      drop: function() { 
        alert('Droppable'); 
      }
    });
  });
</script>

Anschließend folgt nur noch das Einfügen der beiden Container, es könnten auch andere Objekte sein, in den HTML Code. Im unteren Teil des Artikels sehen Sie ein einfaches Beispiel.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>jQuery UI - Droppable</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.droppable.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#dragMe").draggable();
        $("#dropArea").droppable({
          drop: function() { 
            alert('Droppable'); 
          }
        });
      });
    </script>
    <style>
     #dragMe {
      float: left;
      width: 100px;
      height: 100px;
      background-color: red;
      border: 1px solid #000000;
      text-align: center;
     }
     #dropArea {
      float: right;
      width: 200px;
      height: 200px;
      background-color: grey;
      border: 1px solid #000000;
     }
    </style>
  </head>
  <body>
 
    <div id="dragMe">
    <b>Drag me</b>
    </div>
 
    <div id="dropArea"> 
    </div>
 
  </body>
</html>

Demo ansehen
Projekt downloaden