DIV drag drop in JQuery

I come across one scenario that I need to create a pop up which should be draggable.
So I created one popup using JQuery.

Important thing is that i am using update panel in my page. i assigned one css class at design time.
my need is pop up should always open at top of page. if i drag and drop div at page bottom and close the div means , next it is opening only at bottom.

So in order to solve this problem i assign all css properties at run time in javascript on particular control on click event.

you can download jquery files from following links

http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js

Please add script references inside form tag.


Page Design:

function OpenPopup() {
var object = document.getElementById("makeMeDraggable");
object.style.display = "block";
object.style.borderWidth = "2px";
object.style.borderCollapse = "collapse";
object.style.borderStyle = "solid";
object.style.borderColor = "black";
object.style.zIndex = "71";
object.style.position = "fixed";
object.style.width = "75%";
object.style.top = "10px";
object.style.left = "10%";
object.style.cursor = "move";
object.style.backgroundColor = "Red";
}


<form id="form1" runat="server">
<script src="../Scripts/jquery.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(init); function init()
{ $('#makeMeDraggable').draggable(); }
</script>
<a onclick="OpenPopup();">Click here</a>
   
<div id="makeMeDraggable" style="display: none">
<div>
//Add your design here
// add any controls like grid to load dynamic data
</div>
</div>
</form>