jQuery UI is a powerful, official library of **user interface interactions, effects, widgets, and themes** built on top of the jQuery JavaScript Library. It provides professional-grade components like datepickers, sliders, and draggable elements out of the box.
jQuery UI is divided into three functional groups:
| Category | Examples |
|---|---|
| Interactions | Draggable, Droppable, Resizable, Selectable, Sortable. |
| Widgets | Datepicker, Accordion, Slider, Progressbar, Dialog, Tabs. |
| Effects | Color animations, Class transitions, advanced Easing. |
To use jQuery UI, you must include the jQuery Library first, followed by the jQuery UI script and its CSS theme file.
<!-- 1. jQuery Core (Required first) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 2. jQuery UI CSS (For styling) -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<!-- 3. jQuery UI JS (For logic) -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>One of the most popular features of jQuery UI is making any element draggable with only one line of code.
$(function() {
// Simply call draggable() on any element
$("#myBox").draggable();
});