Avatar billede thewicked Nybegynder
22. oktober 2000 - 11:26 Der er 20 kommentarer og
1 løsning

Drag layer

Hej

Jeg har lidt problemer med et drag script.
Det virker fint - men når jeg sætter en tabel ind i mellem div taggene, så sker der intet:

Her er min kode - Håber at der er nogen der kan hjælpe :)

<script language=\"JavaScript1.2\">
var dragapproved=false
var z,x,y
function move(){
    if (event.button==1&&dragapproved){
        z.style.pixelLeft=temp1+event.clientX-x
        z.style.pixelTop=temp2+event.clientY-y
        return false
    }
}

function drags(){
    if (!document.all)
        return
    if ((event.srcElement.parentElement.id==\"drag\") || (event.srcElement.parentElement.id==\"showUr\")){
        dragapproved=true
        z=event.srcElement.parentElement
        temp1=z.style.pixelLeft
        temp2=z.style.pixelTop
        x=event.clientX
        y=event.clientY
        document.onmousemove=move
    }
}
document.onmousedown=drags
document.onmouseup=new Function(\"dragapproved=false\")
//-->
</script>


<div id=\"drag\" align=\'center\' style=\"position: absolute; z-index: 10; top:50px; left:50px; visibility: visible;\">
<table>
    <tr>
        <td><img src=\"gfx/ikoner/ikon_programmer.gif\" class=\"ikon_programmer1\"  width=\"32\" height=\"32\" alt=\"\" border=\"0\" style=\'Cursor: Default;\'><br>
            <font face=\"verdana\" color=\'#FFFFFF\' style=\"font-size: 8pt;\" class=\"ikon_programmer1\"  style=\'Cursor: Default;\'>Programmer</font></td>
    </tr>
</table>
</div>
Avatar billede thrakrath Nybegynder
22. oktober 2000 - 12:39 #1
Hvad med at at angive class i tabellen:

<table class=\"ikon_programmer1\">
    <tr>
        <td><img src=\"gfx/ikoner/ikon_programmer.gif\" width=\"32\" height=\"32\" alt=\"\" border=\"0\" style=\'Cursor: Default;\'><br>
            <font face=\"verdana\" color=\'#FFFFFF\' style=\"font-size: 8pt;\" style=\'Cursor: Default;\'>Programmer</font></td>
    </tr>
</table>
Avatar billede thewicked Nybegynder
22. oktober 2000 - 12:40 #2
Nej - Det virker desværre heller ikke :(
Avatar billede el_gnu Nybegynder
22. oktober 2000 - 14:29 #3
En løsning kunne være at neste to div layers der fylder det samme, men har et forskelligt z-index.
Det ene skal så indeholde din tabel og have z-index:1 det andet skal være gennemsigtigt og have z-index:2. Så vil du have et usynligt lag der fanger alle events som visuelt ser ud til at ske på din tabel (håber det giver mening)
Avatar billede thewicked Nybegynder
22. oktober 2000 - 14:39 #4
Jeg er faktisk ikke helt klar over hvad du mener.
Neste 2 div layer??? :)
Avatar billede el_gnu Nybegynder
22. oktober 2000 - 14:46 #5
Her er et eksempel:

<div id=\"drag\" align=\'center\' style=\"position: absolute; z-index: 10; top:50px; left:50px; visibility: visible;\">

  <div id=\"eventFanger\" style=\"background-color:transparent;position:absolute;left:0;top:0;width:100;height:100;z-index:2\">
  </div>

  <div id=\"indholdsLayer\" style=\"position:absolute;left:0;top:0;width:100;height:100;z-index:1\">
      <!-- her skal din tabel være -->
  </div>

</div>

altså det layer der hedder drag er parent til eventFanger og indholdsLayer, men eventFanger har et højere z-index så det fanger alle events! De to nestede layers skal selfølgelig have samme størrelse for at tricket virker.
Avatar billede thewicked Nybegynder
22. oktober 2000 - 14:57 #6
Det løser problemet med Tabellen, men skaber et nyt. Man kan ikke længere trække billed og tekst rundt. Man kan kun dragge det hvis man klikker udenfor teksten og billedet - jeg går ud fra at det er <div id=\"indholdsLayer\"> der gør det?
Avatar billede el_gnu Nybegynder
22. oktober 2000 - 15:02 #7
hmm, hos mig er der ikke noget problem. Prøv med den her kode som jeg testede med:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0//EN\">
<HTML>
<HEAD>
    <TITLE>[Ingen titel]</TITLE>

<script language=\"JavaScript1.2\">
var dragapproved=false
var z,x,y
function move(){
    if (event.button==1&&dragapproved){
        z.style.pixelLeft=temp1+event.clientX-x
        z.style.pixelTop=temp2+event.clientY-y
        return false
    }
}

function drags(){
    if (!document.all)
        return
    if ((event.srcElement.parentElement.id==\"drag\") || (event.srcElement.parentElement.id==\"showUr\")){
        dragapproved=true
        z=event.srcElement.parentElement
        temp1=z.style.pixelLeft
        temp2=z.style.pixelTop
        x=event.clientX
        y=event.clientY
        document.onmousemove=move
    }
}
document.onmousedown=drags
document.onmouseup=new Function(\"dragapproved=false\")
//-->
</script>

</HEAD>
<BODY>

<div id=\"drag\" align=\'center\' style=\"position: absolute; z-index: 10; top:50px; left:50px; visibility: visible;\">

  <div id=\"eventFanger\" style=\"background-color:transparent;position:absolute;left:0;top:0;width:100;height:100;z-index:2\">
  </div>

  <div id=\"indholdsLayer\" style=\"background-color:black;position:absolute;left:0;top:0;width:100;height:100;z-index:1\">
    <table>
        <tr>
        <td><img src=\"gfx/ikoner/ikon_programmer.gif\" class=\"ikon_programmer1\"  width=\"32\" height=\"32\" alt=\"\" border=\"0\" style=\'Cursor: Default;\'><br>
            <font face=\"verdana\" color=\'#FFFFFF\' style=\"font-size: 8pt;\" class=\"ikon_programmer1\"  style=\'Cursor: Default;\'>Programmer</font></td>
        </tr>
        </table>
  </div>

</div>

</BODY>
</HTML>
Avatar billede thewicked Nybegynder
22. oktober 2000 - 15:05 #8
Desværre ikke - jeg har erstattet min egen kode med ovenstående kode, og resultatet er det samme.
Siges skal det at filen hvor drag koden ligger, er en include fil.
Avatar billede el_gnu Nybegynder
22. oktober 2000 - 15:07 #9
Prøv lige at teste kun med ovenstående kode og sig om det virker efter hensigten, så vi kan udelukke nogle muligheder
Avatar billede thewicked Nybegynder
22. oktober 2000 - 15:14 #10
Jeg har testet koden for sig selv, og den virker desværre heller ikke.
Avatar billede el_gnu Nybegynder
22. oktober 2000 - 15:17 #11
hmmm, prøv at indsætte alert(event.srcElement.id) drags funktionen og test så (du burde ved klik på billedet få en alert der siger \"eventFanger\")
Avatar billede thewicked Nybegynder
22. oktober 2000 - 15:20 #12
Jeg får en alert der siger \"indholdslayer\"
Avatar billede el_gnu Nybegynder
22. oktober 2000 - 15:23 #13
Avatar billede thewicked Nybegynder
22. oktober 2000 - 15:29 #14
Jep - den er god nok - Alert \"eventFanger\", den har jeg også fået. Jeg har afprøvet dit script, og billedet og teksten flytter sig, når man holder musen nede på enten billedet og teksten. Og fjerner man Alert; så virker det ikke når man igen prøver holde musen nede over billedet eller teksten.
Avatar billede el_gnu Nybegynder
22. oktober 2000 - 15:33 #15
øhh, det forstod jeg ikke helt.
her er siden uden alert www.espen.dk/eksperten/layer_drag_med_tabel_og_billed_uden_alert.html
Avatar billede thewicked Nybegynder
22. oktober 2000 - 15:36 #16
Dit Scriptet virker fint, men hvis du prøver at dragge i enten teksten eller billedet, så virker det desværre ikke. Ihvertefald ikke på min browser(ID5.5)
Avatar billede el_gnu Nybegynder
22. oktober 2000 - 15:39 #17
hmm, hos mig virker det fint (IE 5).
Sorry, men jeg kan squ ikke lige greje den
Avatar billede thewicked Nybegynder
22. oktober 2000 - 15:41 #18
Du får 50 point for din indsats- Ok :)
Avatar billede el_gnu Nybegynder
22. oktober 2000 - 15:42 #19
måske hvis man lagde en transparent gif i eventFanger og satte den til at fange events.

øjeblik, så uploader jeg en tester
Avatar billede el_gnu Nybegynder
22. oktober 2000 - 15:50 #20
Avatar billede el_gnu Nybegynder
22. oktober 2000 - 15:54 #21
ups, der var vist en alert for meget, det skulle være fikset nu.
For at få dette til at virke så har jeg indsat en ekstra parentElement i drag funktionen
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