Drag&Drop Panels oftewel Widgets in ASP.NET

Al enige tijd was ik van plan om "draggable panels" (ook wel widgets genoemd) te ontwikkelen in ASP.NET, zodat ik deze kon gaan gebruiken in een dashboard pagina in de webapplicaties die wij ontwikkelen. Een voorbeeld hiervan zijn de Gadgets in iGoogle:


Natuurlijk heb ik deze techniek niet helemaal zelf ontwikkeld, want er zijn er al genoeg die mij voor zijn geweest... het wiel hoeft immers niet opnieuw uitgevonden te worden. De controls die voor mij het beste in aanmerking kwamen waren de controls die Omar AL Zabir heeft ontwikkeld.
Omar heeft een project ontwikkeld (open source) waarvan je online kan bekijken hoe dit functioneert: http://www.dropthings.com/. De sources van dit project kan je hier downloaden.

Het nadeel van dit open source project is de complexiteit die er aanwezig is, vanwege de vele 'Widgets' die er al inzitten. Ik het dit project uitgekleed tot een project waar alleen de techniek van de Drag&Drop widgets aanwezig is. Met behulp van dit project kan je veel eenvoudiger een start maken om de Widgets verder te ontwikkelen tot je eigen controls.


Laten we beginnen met een voorbeeld filmpje wat bewijst dat het allemaal ook nog werkt:


Dit project is ontwikkeld in ASP.NET 3.5 SP1 en maakt gebruik van het AjaxControlToolkit. Het project bestaat uit de volgende onderdelen:

• DragControls folder. Hierin staan de AJAX control extenders die Omar heeft ontwikkeld.
• Default pagina. Deze pagina bevat 2 Panel controls welke ieder 2 Widgets bevat. Hierbij heb ik gebruik gemaakt van standaard ASP.NET controls. Het is natuurlijk netter om uiteindelijk de controls die voor de Widgets zijn gebruikt te verwerken tot 1 custom ASP.NET control óf 1 UserControl
• Voor elk Panel control waarin Widgets staan is een CustomDragDropExtender toegevoegd aan de pagina. Hierin staat het volgende gedefinieerd:
  TargetControlID: ID van het Panel control welke de Widgets bevat;
  DragItemClass: welke CssClass wordt gebruikt voor het kenmerken van een Widget
  DragItemHandleClass: welke CssClass wordt gebruikt voor het kenmerken van de header van een Widget (dit header element wordt gebruikt om het Widget te Drag&Droppen);
  DropCueID: ID van het control waarin de Widgets in gedropt kunnen worden. Elk Panel wat Widgets kan bevatten heeft een dergelijk Drop control nodig.
  OnClientDrop: hierbij kan een javascript functie aangegeven worden welke uitgevoerd dient te worden, nadat een Widget versleept is
• Stylesheet. Deze stylesheet bevat alleen die stijlen die gebruikt worden door de Widget functionaliteit
• WidgetHandler.js. Dit javascript bestand bevat de onDropWidget functie welke aangeroepen wordt nadat een Widget versleept is (OnClientDrop)
  Deze javascript functie maakt gebruik van de WidgetService om hierin de methode MoveWidget aan te roepen.
• WidgetService. Webservice welke door de Default pagina is toegevoegd aan de ASP.NET ScriptManager. Dit zorgt ervoor dat de WebMethodes in deze WebService beschikbaar komen middels een object model in javascript. De webservice functies zijn dan dus vanuit javascript direct aan te roepen.

Ik heb verder geen implementatie toegevoegd voor het daadwerkelijk verplaatsen van een Widget aan de server zijde. De knoppen voor het verwijderen/sluiten van een Widget zijn wel aanwezig, maar ook deze heb ik niet geïmplementeerd.
Het lijkt me juist beter dat jullie deze functionaliteit zelf implementeren en ik de code in dit project niet vervuil met applicatielogica waar jullie niets aan hebben.

De source code kan je hier downloaden.
Succes ermee !!!


Bronnen:
http://www.dropthings.com/
http://msmvps.com/blogs/omar/archive/2007/03/22/asp-net-ajax-extender-for-multi-column-widget-drag-drop.aspx