The draggables component is used to make any specified element or collection of elements draggable, so that they can be picked up and moved around the page by a visitor. Draggability is a great effect, and is a feature that can be used in numerous ways to improve the interface of our web pages.
Using jQuery UI means that we don't have to worry about all of the tricky differences between browsers that originally made draggable elements on web pages a nightmare to implement and maintain.
Let's look at the default implementation by first making a simple <div> element draggable. We won't do any additional configuration. Therefore, all that this code will allow you to do is pick up the element with the mouse pointer and drag it around the viewport.
In a new file in your text editor, add the following code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Draggable</title...