Flytbare kasser
Jeg har lavet et lille script, hvor man kan flytte nogle kasser rundt og derefter vil de, når man slipper dem, placere sig i nogle felter i en tabel - hvis feltet er tomt.Jeg har to problemer som jeg gerne vil have lidt hjælp til at løse(er ny indenfor javascript, så lidt grundige forklaringer vil være rart).
1. Det virker som om kasserne ikke altid placerer sig som de skal, oftest hvis man placerer den ind over en anden kasse, så bliver den liggende sådan midt i det hele.
2. Det er lidt omstændigt med en ny funktion til hver kasse der skal kunne flyttes, men jeg kan simpelt hen ikke få det til at virke med en generel funktion? problemet opstår vidst ved linien:
document.onmousemove = moveMoveBox3;
Hvor jeg ikke kan få det til at virke med et id felt istedet, altså noget a'la:
document.onmousemove = moveMoveBox(id);
Her følger hele scriptet:
<html>
<head>
<title>Nyt dokument</title>
<script>
var felt1,felt2,felt3,felt4,felt5,felt6
felt = new Array();
for(i=1;i<7;i++){
felt[i] = 0;
}
function moveMoveBox1(){
moveBox = document.getElementById("moveBox1")
if(initialized==true){
moveBox.style.pixelLeft=tempX+event.clientX-X;
moveBox.style.pixelTop=tempY+event.clientY-Y;
return false;
}
}
function moveMoveBox2(){
moveBox = document.getElementById("moveBox2")
if(initialized==true){
moveBox.style.pixelLeft=tempX+event.clientX-X;
moveBox.style.pixelTop=tempY+event.clientY-Y;
return false;
}
}
function moveMoveBox3(){
moveBox = document.getElementById("moveBox3")
if(initialized==true){
moveBox.style.pixelLeft=tempX+event.clientX-X;
moveBox.style.pixelTop=tempY+event.clientY-Y;
return false;
}
}
function initXY(id){
moveBox = document.getElementById(id)
X=event.clientX;
Y=event.clientY;
document.body.onselectstart=new Function("return false")
tempX=moveBox.style.pixelLeft;
tempY=moveBox.style.pixelTop;
initialized=true;
if(id=='moveBox1'){
document.onmousemove = moveMoveBox1;
}
if(id=='moveBox2'){
document.onmousemove = moveMoveBox2;
}
if(id=='moveBox3'){
document.onmousemove = moveMoveBox3;
}
}
function disable(id){
for (i=1; i<7; i++) {
if(felt[i] == id){
felt[i] = 0;
}
}
moveBox = document.getElementById(id)
document.body.onselectstart=new Function("return true")
initialized=false;
tempX=moveBox.style.pixelLeft;
if(tempX <= 320){
tempX = 252;
}
if(tempX > 320){
tempX = 403;
}
tempY=moveBox.style.pixelTop;
if(tempY >= 407){
if(tempX == 252 && felt[1] == 0){
felt[1] = id;
tempY = 511;
}
else{
if(tempX == 403 && felt[2] == 0){
tempY = 511;
felt[2] = id;
}
else{
tempX = 0;
tempY = 0;
}
}
}
if(tempY >= 202 && tempY < 407 ){
if(tempX == 252 && felt[3] == 0){
felt[3] = id;
tempY = 308;
}
else{
if(tempX == 403 && felt[4] == 0){
tempY = 308;
felt[4] = id;
}
else{
tempX = 0;
tempY = 0;
}
}
}
if(tempY < 202){
if(tempX == 252 && felt[5] == 0){
felt[5] = id;
tempY = 104;
}
else{
if(tempX == 403 && felt[6] == 0){
tempY = 104;
felt[6] = id;
}
else{
tempX = 0;
tempY = 0;
}
}
}
moveBox.style.pixelLeft = tempX;
moveBox.style.pixelTop = tempY;
}
document.onmouseup=disable;
</script>
</head>
<body>
<div id='moveBox1' style='position:absolute;left:0;top:0;visibility:visible;z-index:4;' OnMouseDown="initXY('moveBox1');" OnMouseUp="disable('moveBox1');">
<table cellspacing="0" cellpadding="0" width="148">
<tr>
<td bgcolor="#000000" height="200">
<br>
<b> </b><br>
</td>
</tr>
</table>
</div>
<div id='moveBox2' style='position:absolute;left:0;top:210;visibility:visible;z-index:4;' OnMouseDown="initXY('moveBox2');" OnMouseUp="disable('moveBox2');">
<table cellspacing="0" cellpadding="0" width="148">
<tr>
<td bgcolor="#000000" height="200">
<br>
<b> </b><br>
</td>
</tr>
</table>
</div>
<div id='moveBox3' style='position:absolute;left:0;top:420;visibility:visible;z-index:4;' OnMouseDown="initXY('moveBox3');" OnMouseUp="disable('moveBox3');">
<table cellspacing="0" cellpadding="0" width="148">
<tr>
<td bgcolor="#000000" height="200">
<br>
<b> </b><br>
</td>
</tr>
</table>
</div>
<div style="position:absolute;left:250;top:100;visibility:visible">
<table width="304" border="1">
<tr>
<td height="202" width="152"> </td>
<td height="202" width="152"> </td>
</tr>
<tr>
<td height="202" width="152"> </td>
<td height="202" width="152"> </td>
</tr>
<tr>
<td height="202" width="152"> </td>
<td height="202" width="152"> </td>
</tr>
</table>
</div>
</body>
</html>
