jQuery UI Droppable

jQuery UI Droppable creates a target that can receive elements made draggable with Draggable.

Basic Draggable + Droppable Top ↑

$( "#draggable" ).draggable();

$( "#droppable" ).droppable({
    drop: function ( event, ui ) {
        $( this ).find( "p" ).text( "Dropped!" );
    }
});

Basic Droppable demo →

Droppable Options Top ↑

accept

Controls which draggable elements the target accepts.

$( "#droppable" ).droppable({
    accept: ".accepted"
});

Read the current option:

const value =
    $( "#droppable" ).droppable( "option", "accept" );

Set the option after initialization:

$( "#droppable" ).droppable(
    "option",
    "accept",
    ".accepted"
);

Open demo →

Open demo →

activeClass

Legacy option that adds a class while an acceptable draggable is active.

$( "#droppable" ).droppable({
    activeClass: "ui-state-highlight"
});

Read the current option:

const value =
    $( "#droppable" ).droppable( "option", "activeClass" );

Set the option after initialization:

$( "#droppable" ).droppable(
    "option",
    "activeClass",
    "ui-state-highlight"
);

Open demo →

addClasses

Controls whether the base ui-droppable class is added.

$( "#droppable" ).droppable({
    addClasses: false
});

Read the current option:

const value =
    $( "#droppable" ).droppable( "option", "addClasses" );

Set the option after initialization:

$( "#droppable" ).droppable(
    "option",
    "addClasses",
    false
);

classes

Adds custom classes to Droppable structural states such as ui-droppable, ui-droppable-active and ui-droppable-hover.

$( "#droppable" ).droppable({
    classes: { "ui-droppable": "highlight" }
});

Read the current option:

const value =
    $( "#droppable" ).droppable( "option", "classes" );

Set the option after initialization:

$( "#droppable" ).droppable(
    "option",
    "classes",
    { "ui-droppable": "highlight" }
);

Open demo →

Open demo →

Open demo →

disabled

Disables dropping when set to true.

$( "#droppable" ).droppable({
    disabled: true
});

Read the current option:

const value =
    $( "#droppable" ).droppable( "option", "disabled" );

Set the option after initialization:

$( "#droppable" ).droppable(
    "option",
    "disabled",
    true
);

Open demo →

greedy

For nested droppables, prevents a parent target from acting as though it received the draggable when the child handles it.

$( "#droppable" ).droppable({
    greedy: true
});

Read the current option:

const value =
    $( "#droppable" ).droppable( "option", "greedy" );

Set the option after initialization:

$( "#droppable" ).droppable(
    "option",
    "greedy",
    true
);

Open demo →

hoverClass

Legacy option that adds a class while an accepted draggable is over the target.

$( "#droppable" ).droppable({
    hoverClass: "drop-hover"
});

Read the current option:

const value =
    $( "#droppable" ).droppable( "option", "hoverClass" );

Set the option after initialization:

$( "#droppable" ).droppable(
    "option",
    "hoverClass",
    "drop-hover"
);

Open demo →

scope

Groups compatible draggable and droppable elements.

$( "#droppable" ).droppable({
    scope: "files"
});

Read the current option:

const value =
    $( "#droppable" ).droppable( "option", "scope" );

Set the option after initialization:

$( "#droppable" ).droppable(
    "option",
    "scope",
    "files"
);

Open demo →

tolerance

Controls how overlap is tested: fit, intersect, pointer or touch.

$( "#droppable" ).droppable({
    tolerance: "pointer"
});

Read the current option:

const value =
    $( "#droppable" ).droppable( "option", "tolerance" );

Set the option after initialization:

$( "#droppable" ).droppable(
    "option",
    "tolerance",
    "pointer"
);

Open demo →

Droppable Methods Top ↑

destroy()

Remove Droppable behavior completely.

$( "#droppable" ).droppable( "destroy" );

Open demo →

disable()

Temporarily disable the drop target.

$( "#droppable" ).droppable( "disable" );

enable()

Re-enable a disabled drop target.

$( "#droppable" ).droppable( "enable" );

Open demo →

instance()

Return the Droppable widget instance.

$( "#droppable" ).droppable( "instance" );

option()

Read or change options. The example reads all current options.

const options = $( "#droppable" ).droppable( "option" );

Open demo →

widget()

Return the jQuery object representing the droppable element.

$( "#droppable" ).droppable( "widget" );

Droppable Events Top ↑

activate

Fires when an acceptable draggable begins dragging.

$( "#droppable" ).droppable({
    activate: function ( event, ui ) {
        console.log( "activate" );
    }
});

Open demo →

create

Fires when Droppable is initialized.

$( "#droppable" ).droppable({
    create: function ( event, ui ) {
        console.log( "create" );
    }
});

Open demo →

deactivate

Fires when an acceptable draggable stops dragging.

$( "#droppable" ).droppable({
    deactivate: function ( event, ui ) {
        console.log( "deactivate" );
    }
});

Open demo →

drop

Fires when an accepted draggable is dropped on the target.

$( "#droppable" ).droppable({
    drop: function ( event, ui ) {
        console.log( "drop" );
    }
});

drop: function ( event, ui ) {
    $( this ).text(
        "Dropped: " + ui.draggable.text()
    );
}

Open demo →

out

Fires when an accepted draggable leaves the target.

$( "#droppable" ).droppable({
    out: function ( event, ui ) {
        console.log( "out" );
    }
});

Open demo →

over

Fires when an accepted draggable enters the target.

$( "#droppable" ).droppable({
    over: function ( event, ui ) {
        console.log( "over" );
    }
});

Open demo →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: