|
Book Section
General Section
Other Sites
|
JavaScript Workshop Forums
| View previous topic :: View next topic |
| Author |
Message |
mklein
Member
Joined: 07 Nov 2010
Posts: 13
Location: London
|
 Posted: Tue Dec 28, 2010 10:05 am Post subject: 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>
|
|
|
| Back to top |
|
 |
sohnee
Senior Member
Joined: 17 Jul 2002
Posts: 2077
Location: UK
|
| Posted: Wed Dec 29, 2010 4:08 am Post subject: |
|
|
I have had a quick play and have noticed that the mousedown event is being propagated throughout the DOM... i.e. when you drag the image, you get the "no entry" icon that indicates the drag is being performed against the image rather than the div that contains it.
You can prevent event propagation by adding return false statements like this:
| Code: | els[el].onmousedown=function() {this.dragging=true; return false;}
els[el].onmouseup=function() {this.dragging=false; return false;} |
You should notice that this fixes your problem.
Even though you aren't interested in using a library, you may find looking at the source code can be useful... for example, looking at the following example will give you some hints about how to make your drag and drop work across multiple devices, including iPad, Tablet, Mobile and Desktop browsers...
http://www.jsplugins.com/Scripts/Plugins/View/Jquery-Mobile-Drag-And-Drop/
_________________
I also work on... Steve Fenton's Blog and contribute to The Enhance PHP Unit Testing Framework |
|
| Back to top |
|
|
mklein
Member
Joined: 07 Nov 2010
Posts: 13
Location: London
|
| Posted: Wed Dec 29, 2010 2:23 pm Post subject: |
|
|
Hi Sohnee
Wow, you have really hit the nail on the head. Making those small additions does indeed fix the problem. I have just read up on the concept of returning true/false and as you say, in this context, it can prevent default markup behaviour.
Thanks again for looking into this for me
Matt |
|
| Back to top |
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
Powered by phpBB © 2001, 2002 phpBB Group
|
|
(c) 1997-2002 Starling Technologies and
Michael Moncur. Portions (c) Sams Publishing.
|
|
|
FAQ
Search
Memberlist
Usergroups
Register
Profile
Log in to check your private messages
Log in
