Drag-and-drop is a common operation in web pages for moving an item (using the mouse to drop the item on another page element). For example, if the page displays images of articles to be purchased, users can drag an item into a cart that symbolizes all the goods to be purchased.

jQuery UI can manage these operations, distinguishing the operation of “drag” (the movement of an object) and the operation of “drop” (the depositing of the item being moved). For this, jQuery UI offers both the draggable () and droppable () methods.