PDA

View Full Version : Drag and drop problem



sketchboy123
01-17-2008, 10:15 AM
The drag and drop script I'm using works fine on my computer but online in the web page the images don't appear. Can anyone tell me why not? Here is the script and my web site. Thanks for constructive advice.

http://eslcomics.100webspace.net/Comic1/MovableImages4.html

<html>
<head>
<title>Untitled</title>
<style>
<!--
.dragme{position:relative;}
-->
</style>
<script language="JavaScript1.2">
<!--

var ie=document.all;
var nn6=document.getElementById&&!document.all;

var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{
if (isdrag)
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}

function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";

while (fobj.tagName != topelement && fobj.className != "dragme")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}

if (fobj.className=="dragme")
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
//-->
</script>
</head>
<body>
<img name="P1" src="P1.jpg" class="dragme" width="150" height="100" border="0" alt="P1">
<img name="P2" src="P2.jpg" class="dragme" width="150" height="100" border="0" alt="P2">
<img name="P3" src="P3.jpg" class="dragme" width="150" height="100" border="0" alt="P3">
<img name="P4" src="P4.jpg" class="dragme" width="150" height="100" border="0" alt="P4">
<img name="P5" src="P5.jpg" class="dragme" width="150" height="100" border="0" alt="P5">
</body>
</html>

codeexploiter
01-17-2008, 10:59 AM
I have made some changes in the following section a bit in your code, the change i've made is in bold state.


<img name="P1" src="P1.JPG" class="dragme" width="150" height="100" border="0" alt="P1">
<img name="P2" src="P2.JPG" class="dragme" width="150" height="100" border="0" alt="P2">
<img name="P3" src="P3.JPG" class="dragme" width="150" height="100" border="0" alt="P3">
<img name="P4" src="P4.JPG" class="dragme" width="150" height="100" border="0" alt="P4">
<img name="P5" src="P5.JPG" class="dragme" width="150" height="100" border="0" alt="P5">


Actually you've used the image like "P1.jpg" in the source but it should be "P1.JPG" in your case. Once you correct this the images will be visible.

sketchboy123
01-18-2008, 01:42 PM
Thanks Codeexploiter,
It worked like a charm. Why does it matter though, when I've seen other examples using lower case jpg? Anyhow, thanks again.
Dan

sketchboy123
01-18-2008, 01:44 PM
Never mind, I get it.