Error javascript drag and drop

I have done drag and drop of popup in JavaScript and it is dragged in all directions properly but down.MouseUp event is not triggered properly when I drag the popup towards down.So that it is moving even though I released mouse. I am really screwed up with this bug.Please help..I have to resolve it urgently....

Here is my code..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">


<style>

body{

 margin:0px;

 padding:0px;

}

iframe{

  width:800px;

  height:500px;

}

img{border:none;}


.parentDisabled

{

 width:100%;

 height:100%

 background-color:red;

 position:absolute;

 top:0;

 left:0;

 display:block;

 border:1px solid blue;

}

#popup{

   position:absolute;

   width:800px;

   height:500px;

   border:2px solid #999188;  

  display:none;

 }


 #header{

 padding-right:0px;

 width:800px;

 }


 #close{

  cursor:hand;  

  width:15px;

  position: absolute;

  right:0;

  top:0;

  padding:2px 2px 0px 0px;

 }

 

 #move{

 cursor:move;

 background:#999188;

 width:800px;

 line-height:10px;

 }


 #container{


 }

 .navigate{

  border:1px solid black ;

  background:#CC00FF;

  color:white;

  padding:5px;

  cursor:hand;

  font-weight:bold;

  width:150px;

 }

 

</style>

</HEAD>


<BODY>

<div onClick="showPopUp('w3schools');" class="navigate">W3Schools</div>

<div onClick="showPopUp('yahoo');" class="navigate">Yahoo</div>

<div onClick="showPopUp('linkedin');" class="navigate">LinkedIn</div>

<div onClick="showPopUp('vistex');" class="navigate">Vistex</div>


<div id="popup">

       <div id="header">

        <span id="move"></span>

        <span id="close"><img src="close_red.gif" onClick="closePopUp()" alt="Close"/></span>   

       </div> 

      

      <div id="container">

          <iframe name="frame" id="Page_View" frameborder=0>

              page cannot be displayed

          </iframe>

      </div>


    </div>

</BODY>


<script>


var popUpEle=null;


function showPopUp(value,evt)

{

 evt = evt ? evt : window.event;

 var left=evt.clientX;

 var top=evt.clientY;

 

 popUpEle = document.getElementById('popup');

 if(popUpEle)

 {

  closePopUp();

  var url= "http://www."+value+".com";  

  document.getElementById('Page_View').src=url;

  

  popUpEle.style.left=left;

  popUpEle.style.top=top;

  popUpEle.style.filter="revealTrans( transition=1, duration=1)";

  popUpEle.filters.revealTrans( transition=1, duration=1).Apply();

  popUpEle.filters.revealTrans( transition=1, duration=1).Play();

  popUpEle.style.display="inline";

 }

}

function closePopUp(){

 if(popUpEle)

 {

  popUpEle.style.filter="revealTrans( transition=0, duration=4)";

  popUpEle.filters.revealTrans( transition=0, duration=5).Apply();

  popUpEle.filters.revealTrans( transition=0, duration=5).Play();

  popUpEle.style.display="none";


 }

}


  var dragApproved=false;

  var DragHandler = {


    // private property.

    _oElem : null,


    // public method. Attach drag handler to an element.

    attach : function(oElem) {

        oElem.onmousedown = DragHandler._dragBegin;

        // callbacks

        oElem.dragBegin = new Function();

        oElem.drag = new Function();

        oElem.dragEnd = new Function();

        return oElem;

    },

    // private method. Begin drag process.

    _dragBegin : function(e) {

        

        var oElem = DragHandler._oElem = this;


        if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '0px'; }

        if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; }


        var x = parseInt(oElem.style.left);

        var y = parseInt(oElem.style.top);


        e = e ? e : window.event;

    

       if (e.pageX || e.pageY) 

       {

        oElem.mouseX = e.pageX;

        oElem.mouseY = e.pageY;

       }

       else if (e.clientX || e.clientY)     {

        oElem.mouseX = e.clientX + document.body.scrollLeft+ document.documentElement.scrollLeft;

        oElem.mouseY = e.clientY + document.body.scrollTop+ document.documentElement.scrollTop;

       }


        document.onmousemove = DragHandler._drag;

        document.onmouseup = DragHandler._dragEnd;  

        return false;

    },

    // private method. Drag (move) element.

    _drag : function(e) {

     

        var oElem = DragHandler._oElem;


        var x = parseInt(oElem.style.left);

        var y = parseInt(oElem.style.top);


        e = e ? e : window.event;


       var clientXTmp,clientYTmp;

       if (e.pageX || e.pageY) 

       {

        clientXTmp = e.pageX;

        clientXTmp = e.pageY;

       }

       else if (e.clientX || e.clientY)     {

        clientXTmp = e.clientX + document.body.scrollLeft+ document.documentElement.scrollLeft;

        clientYTmp = e.clientY + document.body.scrollTop+ document.documentElement.scrollTop;

       }

        

        var tmpX = x + (clientXTmp - oElem.mouseX);

        var tmpY = y + (clientYTmp - oElem.mouseY);

       

        if(tmpX<=0){tmpX = 0;}

        if(tmpY<=0){tmpY = 0;}


        oElem.style.left = tmpX + 'px';

        oElem.style.top  = tmpY + 'px';


        oElem.mouseX = clientXTmp;

        oElem.mouseY = clientYTmp;

        return false;

    

    },

    // private method. Stop drag process.

    _dragEnd : function() 

     {

        var oElem = DragHandler._oElem;

        document.onmousemove = null;

        document.onmouseup = null;

        DragHandler._oElem = null;

    }

}

DragHandler.attach(document.getElementById('popup'));</script>


</HTML>

Edited by Alexander, 06 January 2012 - 02:04 AM.
Move from tutorials, had added code tags