jQuery UI Helpers / Droppable

Simple Droppable

You can create a droppable widget with the BeginDroppable method.

You should call the BeginDroppable method in a using statement. This is required to emit all the necessary HTML tags into the response.

The following example creates a simple droppable.

@using (Html.JQueryUI().BeginDroppable())
    <span>You could drop a draggable here.</span>

This creates a simple droppable element.

You could drop a draggable here.


Like the other widgets the droppable also has a fluent configuration API. To use it, create the droppable with the Begin method which takes a Droppable as its argument. The following example demonstrates this.

@using (Html.JQueryUI().Begin(new Droppable().ActiveClass("ui-state-highlight")))
    <span>The gray square is a draggable. You can drop it here.</span>

This creates the droppable below.

Drag me!
The gray square is a draggable. You can drop it here.

HTML Helpers

Fluent Configuration API