How to make an element draggable with jQuery UI? Start by adding the stylesheet in the head of your HTML:

html
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

Give your element an id:

html
<div id="dragging"></div>

Towards the end of your HTML document add the necessary jQuery and jQuery UI scripts:

html
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

Then turn the element into draggable with a simple call:

js
$(function() {
    $('#dragging').draggable();
});