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().
%MINIFYHTMLf820b19b59b6071ee0594bde5a51fa0e4%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.
%MINIFYHTMLf820b19b59b6071ee0594bde5a51fa0e5%%MINIFYHTMLf820b19b59b6071ee0594bde5a51fa0e6%%MINIFYHTMLf820b19b59b6071ee0594bde5a51fa0e7%%MINIFYHTMLf820b19b59b6071ee0594bde5a51fa0e8%%MINIFYHTMLf820b19b59b6071ee0594bde5a51fa0e9%%MINIFYHTMLf820b19b59b6071ee0594bde5a51fa0e17%
Drag me
