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
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    My attempt at drag and drop...

    Dear forum

    Rather than use a library, I have attempted to write my own attempt at a script that allows multiple elements to be dragged around the page. It starts by loading all divs into an array, and then forms a new array of only divs with the required class name. I believe this script doesn't work for internet explorer, but I am not concerned by this.

    As you will see if you run the code below, the script works well for divs containing text, but if I include an image inside a div, then the image will follow the mouse even if the button is released.

    I have spent a whole day on this tiny script and really don't know where to go from here! Could anybody shed some light on this please?

    Thanks

    Matt

    Code:
    <html> 
    <head> 
    
    <style> 
     .dragger 
     { 
      background-color:lightgreen; 
      position:absolute; 
     } 
    </style> 
    
    <script type="text/javascript"> 
    
    var all_els=[]; 
    var els=[]; 
    var el; 
    
     window.onload = function() 
     { 
    
    all_els=document.getElementsByTagName("div"); //an array of all div elements on page 
    for(var i=0;i<all_els.length;i++){ 
    
    if(all_els[i].className=='dragger') { els.push(all_els[i]);}   //just add those with the correct class name to our final array 
    
     } 
    
    
      for (el in els) 
      { 
      this.dragging=false;  //each element in the array is an object, so new properties e.g. dragging can be set.  Initially set the dragging property of each element to false 
    
      els[el].onmousedown=function() {this.dragging=true;} 
      els[el].onmouseup=function() {this.dragging=false;} 
    
      } 
     } 
    
    
     document.onmousemove = function(e) 
     { 
    
      for(el in els) 
      { 
    
       if (els[el].dragging==true) 
      { 
       els[el].style.left = e.clientX - els[el].offsetWidth/2 +'px'; 
       els[el].style.top = e.clientY - els[el].offsetHeight/2+'px'; 
      } 
    
     } 
     } 
    
    </script> 
    <title>Simple Drag</title> 
    </head> 
    
    <body> 
    <div class="dragger"> Some text to drag </div> 
    <br><br><br><br><br><br> 
    <div class="dragger"> Some other text to drag </div> 
    <br><br><br><br><br><br> 
    <div class="dragger"> <img src="http://www.mpklein.co.uk/images/phoenix.jpg"></img> </div> 
    </body> 
    </html>

  • #2
    Regular Coder oVTech's Avatar
    Join Date
    Nov 2010
    Location
    USA
    Posts
    296
    Thanks
    4
    Thanked 54 Times in 52 Posts
    I have never implemented anything like this before, but I noticed that if you set the image as a background for a div, then it does not stick on the cursor.
    I hope this helps.

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi ...

    I hadn't noticed that, thank you. A simple and effective solution, great !

    Regards

    Matt


  •  

    Posting Permissions

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