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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Apr 2003
    Location
    Northern California
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Drag and Drop Woes

    Hello everyone I need your help yet again! I have been working on a drag and drop script seem to be working pretty good except for a few bugs! Firstly if you grab the objects and try to move it for some reason the mouse slips of the element from time to time even though the button has not been clicked! This could just be my mouse but however I highly doubt this because it happens with no other drag and drop script! Secondly I am unable to use it with multiple objects or elements and I cant think of how I would go about doing this I think it has to do with the zindex of the elements I am not sure kind of puzzlled? For some reason I can only drag the first element! Thank again!

    Code:
    <html>
    <head>
    <script type="text/javascript">
    <!--
    function dragThis(obj){
    	var clked = false, x_pos, y_pos, ele=document.getElementById(obj);
    		ele.onclick=function()
    		{
    		     clked = ( clked ) ? false : true;
    		     x_pos = event.clientX - event.srcElement.style.pixelLeft;
    		     y_pos = event.clientY - event.srcElement.style.pixelTop;
    		     ele=event.srcElement
    
    		}
    		ele.onmousemove=function()
    		{
    		      if( clked )
    	 	      {
    		            event.srcElement.style.pixelLeft = event.clientX - x_pos;
    		            event.srcElement.style.pixelTop = event.clientY - y_pos;
    		      }
    		 }
    }
    window.onload=function(){
    	new dragThis("dragger1");	
    	new dragThis("dragger2");
    	}
    -->
    </script>
    </head>
    <body>
    <div style="background-color:black; color:white; width:150px; height:100px; position:absolute; 
    top:0; left:0; cursor:hand;" id="dragger1">
    Click me to drag <br>
    Click Again To Stop
    </div>
    
    <div style="background-color:black; color:white; width:150px; height:100px; position:absolute; 
    top:200; left:200; cursor:hand;" id="dragger2">
    Click me to drag <br>
    Click Again To Stop
    </div>
    
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    And Thirdly,
    Once one element has been moved and released, the mouseOver state is also grabbing the div.
    Sorry I can't help, but maybe this bump will put under the eye of someone who can!
    All the best,
    Andrew

    I take no responsibility for the above nonsense.


    Left Justified

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://www.vladdy.net/WCA/wintest.html
    I use the "title bar" for dragging - but the mechanics are in the code....
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"


  •  

    Posting Permissions

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