Today i implemented the drag feature on jquery.tools.overlay using jquery.event.drag.js,it's quite easy.Here is the whole demo,hope that can help u.
I found that jquery.tools.overlay will always render a img tag in the dom even if i didn't use any background-image in the css of the overlay,which is very evil~It will render an empty image...Sometimes i don't want any background image on my overlay.
<html>
<head>
<title>dragable layout</title>
<link href="css/overlay-minimal.css" type="text/css" rel="stylesheet"></link>
</head>
<body>
<div id="drager" style="background:blue;width:200;height:50px;margin:0 auto;" rel="#overlay">Click me to open a overlay...</div>
<!-- overlayed element, which is styled with external stylesheet -->
<div class="overlay" id="overlay">
<!-- here is the content for overlay, can be anything -->
<h2 style="margin:10px 0" class="drag">Here is my overlay</h2>
<p style="float: left; margin:0px 20px 0 0;">
<img src="http://static.flowplayer.org/img/title/eye192.png" />
</p>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Donec lorem ligula, elementum vitae,
imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
</p>
</div>
<script src="http://cdn.jquerytools.org/1.0.2/jquery.tools.min.js"></script>
<script src="../jquery_event_drag/1.5/jquery.event.drag-1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div[rel]").overlay({expose:true,closeOnClick:false,onLoad:function(){
var img=this.getBackgroundImage();//OMG,if no bg-img,overlay will render a empty image...
var ol=this.getContent();
ol.bind("drag",function(event){
var pos={top: event.offsetY,left: event.offsetX};
$(this).css(pos);
img.css(pos);
})
}});
});
</script>
</body>
</html>
I found that jquery.tools.overlay will always render a img tag in the dom even if i didn't use any background-image in the css of the overlay,which is very evil~It will render an empty image...Sometimes i don't want any background image on my overlay.