Avatar billede tejs Nybegynder
11. januar 2005 - 15:26 Der er 6 kommentarer og
1 løsning

Drag & Drop funktion

Jeg har følgende:

- 5 billeder med hvert sit ID i venstre side.
- 1 tabel med 1 kolonne og 5 rækker i højre side.

Jeg vil gerne kunne trække et af billederne over på en celle. Denne "event" skal reloade siden med 2 querystrings - billedets ID og celles ID.
Avatar billede moocher Nybegynder
12. januar 2005 - 03:07 #1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Billeder</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript">

klikket = 0;


function ned(x) {

  klikket = x.name;
 

}

function op(x) {

 
 
  if (klikket !== 0) {
  top.location = "siden.php?ned=" + klikket + "&op=" + x.id;
  }
}

</script>

</head>

<body>
<table width="100%" border="0">
  <tr>
    <td width="100" height="500" id="billederne">
    <table width="100%" height="100%" border="0">
        <tr>
          <td height="100"><img src="billde1.jpg" onMouseDown="ned(this)" name="billede1.jpg"></td>
        </tr>
        <tr>
          <td height="100"><img src="billde1.jpg" onMouseDown="ned(this)" name="billede2.jpg"></td>
        </tr>
        <tr>
          <td height="100"><img src="billde1.jpg" onMouseDown="ned(this)" name="billede3.jpg"></td>
        </tr>
        <tr>
          <td height="100"><img src="billde1.jpg" onMouseDown="ned(this)" name="billede4.jpg"></td>
        </tr>
        <tr>
          <td height="100"><img src="billde1.jpg" onMouseDown="ned(this)" name="billede5.jpg"></td>
        </tr>
      </table>
    </td>
    <td></td>
    <td width="103">
      <table width="100%" height="100%" border="1">
        <tr>
          <td height="100" onMouseOver="op(this)" id="21">&nbsp;</td>
        </tr>
        <tr>
          <td height="100" onMouseOver="op(this)" id="22">&nbsp;</td>
        </tr>
        <tr>
          <td height="100" onMouseOver="op(this)" id="23">&nbsp;</td>
        </tr>
        <tr>
          <td height="100" onMouseOver="op(this)" id="24">&nbsp;</td>
        </tr>
        <tr>
          <td height="100" onMouseOver="op(this)" id="25">&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>
Avatar billede moocher Nybegynder
12. januar 2005 - 03:27 #2
De billeder jeg brugte til at lave den var 100x100, så de tal skal du selv rette på.
Avatar billede moocher Nybegynder
12. januar 2005 - 03:29 #3
Har lige lavet denne, hvis du vil have en confirmbox til

function op(x) {

 
 
  if (klikket !== 0) {
  if (confirm("Vil du flytte " + klikket + " til " + x.id))
    {
      top.location = "siden.php?ned=" + klikket + "&op=" + x.id;
    } else {
        klikket = 0;
    };

 
  }
 
}

Bare brug denne op i stedet for den anden
Avatar billede tejs Nybegynder
12. januar 2005 - 13:43 #4
Kombineret med lidt CSS virker det faktisk rigtig godt!!!
Avatar billede moocher Nybegynder
12. januar 2005 - 16:07 #5
Er lidt nysgerrig, skal det blive til et puslespil
Avatar billede moocher Nybegynder
12. januar 2005 - 16:33 #6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Billeder</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript">

klikket = 0;


function ned(x) {

  klikket = x;


}

function op(x) {



  if (klikket !== 0) {
 
    if (klikket.name !== x.name) {
 
      temp = klikket.src;
      klikket.src = x.src;
      x.src = temp;
    }
 
      klikket = 0;
  } 
 

}

</script>

</head>

<body>
<table width="100%" border="0">
  <tr>
    <td width="100" height="500" id="billederne">
    <table width="100%" height="100%" border="1">
        <tr>
          <td height="100"><img src="" name="a6" width="100" height="100" onMouseDown="ned(this)" onMouseOver="op(this)"></td>
        </tr>
        <tr>
          <td height="100"><img src="" name="a7" width="100" height="100" onMouseDown="ned(this)" onMouseOver="op(this)"></td>
        </tr>
        <tr>
          <td height="100"><img src="" name="a8" width="100" height="100" onMouseDown="ned(this)" onMouseOver="op(this)"></td>
        </tr>
        <tr>
          <td height="100"><img src="" name="a9" width="100" height="100" onMouseDown="ned(this)" onMouseOver="op(this)"></td>
        </tr>
        <tr>
          <td height="100"><img src="" name="a10" width="100" height="100" onMouseDown="ned(this)" onMouseOver="op(this)"></td>
        </tr>
      </table>
    </td>
    <td width="1228">
      <table width="100" height="100%" border="1">
        <tr>
          <td height="100"><img src="" width="100" height="100" onMouseDown="ned(this)" onMouseOver="op(this)" name="a5"></td>
        </tr>
        <tr>
          <td height="100"><img src="" width="100" height="100" onMouseDown="ned(this)" onMouseOver="op(this)" name="a4"></td>
        </tr>
        <tr>
          <td height="100"><img src="" width="100" height="100" onMouseDown="ned(this)" onMouseOver="op(this)" name="a3"></td>
        </tr>
        <tr>
          <td height="100"><img src="" width="100" height="100" onMouseDown="ned(this)" onMouseOver="op(this)" name="a2"></td>
        </tr>
        <tr>
          <td height="100"><img src="" width="100" height="100" onMouseDown="ned(this)" onMouseOver="op(this)" name="a1"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>
Avatar billede moocher Nybegynder
12. januar 2005 - 16:35 #7
Du skal dog bruge et blank billede til de steder der ikke skal være noget billede
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester