...

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



mklein
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?

Thanks

Matt


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

oVTech
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.

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

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

Regards

Matt



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum