This example shows you how to create a draggable div using jquery & jquery ui. You can make the div as draggable by simple applying jquery ui draggable() function in document.ready() event.
Syntax
<script language="javascript">
$(document).ready(function () {
$("#divContent").draggable();
});
</script>
Example
You can drag this div to anywhere on the screen.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.content
{
border: solid 2px #ccc;
padding: 20px;
width: 200px;
height: 150px;
color: #CC3916;
font-size: 20px;
font-weight: bold;
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script language="javascript">
$(document).ready(function () {
$("#divContent").draggable();
});
</script>
</head>
<body>
<div id="divContent" class="content">
You can drag this div to anywhere on the screen.
</div>
</body>
</html>