JUICE UI

Supercharge ASP.NET
Web Forms with jQuery UI

droppable

Interaction — Makes selected elements droppable (meaning they accept being dropped on by draggables)..

The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which (individually) or which kind of draggables each will accept.

Examples

Default functionality

<style>
	.draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
	.droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>

<script>
	$(function(){
		$( "#_Default" ).droppable( "option", "drop", function( event, ui ) {
			$( this )
				.addClass( "ui-state-highlight" )
				.find( "p" )
					.html( "Dropped!" );
			}
		);
	});
</script>

<asp:panel ID="_Draggable" CssClass="draggable ui-widget-content" runat="server">
	<p>Drag me to my target</p>
</asp:panel>
<juice:draggable TargetControlID="_Draggable" runat="server"/>

<asp:panel ID="_Default" CssClass="droppable ui-widget-header" runat="server" ClientIDMode="Static">
	<p>Drop here</p>
</asp:panel>
<juice:droppable TargetControlID="_Default" runat="server"/>

Drag me to my target

Drop here

Properties

Events

All events are currently of the type EventHandler. The "sender" parameter is a reference to the control, and should be cast appropriately to access the widget's properties and methods.