View Full Version : My attempt at drag and drop...

12-28-2010, 10:04 PM
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?





<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';


<title>Simple Drag</title>

<div class="dragger"> Some text to drag </div>
<div class="dragger"> Some other text to drag </div>
<div class="dragger"> <img src="http://www.mpklein.co.uk/images/phoenix.jpg"></img> </div>

12-29-2010, 05:13 PM
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.

12-29-2010, 09:46 PM
Hi ...

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