<html>
<head>
<title> Drag Demo 1 </title>
<style type="text/css">
<!--
#drag{
    width:100px;
    height:20px;
    background-color:#eee;
    border:1px solid #333;
    position:absolute;
    top:30px;
    left:200px;
    text-align:center;
    cursor:default;
    }
//-->
</style>
<script type="text/javascript">
<!--
window.onload=function(){
    drag(document.getElementById('drag'));
};function drag(o){
    o.onmousedown=function(a){
        var d=document;if(!a)a=window.event;
        var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
        if(o.setCapture)
            o.setCapture();
        else if(window.captureEvents)
            window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);        d.onmousemove=function(a){
            if(!a)a=window.event;
            if(!a.pageX)a.pageX=a.clientX;
            if(!a.pageY)a.pageY=a.clientY;
            var tx=a.pageX-x,ty=a.pageY-y;
            o.style.zIndex="-1";
            o.style.left=tx;
            o.style.top=ty;
        };        d.onmouseup=function(){
            if(o.releaseCapture)
                o.releaseCapture();
            else if(window.captureEvents)
                window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
            d.onmousemove=null;
            d.onmouseup=null;        };
    };
}
//-->
</script>
</head><body>
<div id="drag">drag me</div><div style="left:200;top:200;width:100;height:100;background:#ccc;"  onmouseover="alert('on');" onmouseout="alert('out')"></div> 
</body>
</html>