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