Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Error in 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..


    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>
    Last edited by WA; 01-06-2012 at 12:58 PM.

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,994
    Thanks
    4
    Thanked 2,662 Times in 2,631 Posts
    Despite the similar sounding names, Java is not the same as Javascript.
    Moving from Java forum to Javascript forum.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •