jQuery UI Droppable

jQuery UI Droppable is a widget that allows programmatic dropping of draggable elements onto a particular target element. It is a part of the jQuery UI library and provides a wide range of options and callbacks that developers can use to customize the behaviour of the widget.

Usage

To use jQuery UI Droppable, you must first include the jQuery and jQuery UI libraries in your HTML file. You can include them either from a content delivery network (CDN) or by downloading the files and saving them in your local project directory.

Once the libraries are included, you can create a droppable element using the droppable() function. The function takes an object as a parameter that can be used to define the options and callbacks for the droppable element.

$("#droppable-element").droppable({
    accept: ".draggable-element",
    activeClass: "highlight",
    drop: function(event, ui) {
        // custom code to handle the dropped element
    }
});

In this example, we first select the droppable element using its ID and call the droppable() function on it. We then define some options and callbacks for the droppable element inside an object passed as a parameter to the function.

Here are some of the common options and callbacks that can be defined for a droppable element:

Options

• accept: A CSS selector for the draggable elements that are accepted by the droppable element
• activeClass: The CSS class applied to the droppable element when a draggable element is being dragged over it
• hoverClass: The CSS class applied to the droppable element when a draggable element is being hovered over it
• tolerance: The mode of tolerance for the droppable element. It can be set to "fit", "intersect", or "pointer"
• greedy: A boolean value that determines whether the droppable element should take precedence over other droppable elements when nested
• scope: A string that defines the scope of the droppable element, so that draggable elements can be restricted to only this scope

Callbacks

• activate: A function called when a draggable element enters the droppable element
• deactivate: A function called when a draggable element leaves the droppable element
• over: A function called when a draggable element is dragged over the droppable element
• out: A function called when a draggable element is dragged out of the droppable element
• drop: A function called when a draggable element is dropped onto the droppable element

Conclusion

jQuery UI Droppable is a powerful widget that allows developers to easily create drag-and-drop functionality on their web pages. By using the options and callbacks provided by the widget, developers can customize the behaviour of the droppable element to suit their needs.