JavaScript Fokusiertes Fenster überlappen lassen

Status
Für weitere Antworten geschlossen.
E

Eichi

Gast
Hallo zusammen,

ich experimentier hier gerade mit bewegbaren Fenstern auf JavaScript-Basis rum aber irgendwie komm ich hier momentan nicht weiter.

Situation:
Ich hab das jetzt soweit hinbekommen, dass ich 2 Fenster habe, die sich bewegen lassen, jedoch ist immer nur eines der beiden Fenster hervorgehoben. Ich will aber, dass jeweils das aktive Fenster das hintere überlappt. Weiß da jemand evtl wie ich das hinbekommen könnte?

HTML:
<html>
  <head>
    <title>index</title>
    <script type="text/javascript">
      var dragobject = 0;
      var dragx = 0;
      var dragy = 0;
      var posx = 0;
      var posy = 0;

      function draginit() {
        document.onmousemove = drag;
        document.onmouseup = dragstop;
      }

      function dragstart(element) {
        dragobjekt = element;
        dragx = posx - dragobjekt.offsetLeft;
        dragy = posy - dragobjekt.offsetTop;
      }

      function dragstop() {
        dragobjekt = 0;
      }

      function drag(ereignis) {
        posx = document.all ? window.event.clientX : ereignis.pageX;
        posy = document.all ? window.event.clientY : ereignis.pageY;
        if(dragobjekt !=0) {
          dragobjekt.style.left = (posx - dragx) + "px";
          dragobjekt.style.top = (posy - dragy) + "px";
        }
      }
    </script>
  </head>
  <body onload="draginit()">
    <div onmousedown="dragstart(this)" style="position:absolute;top:0px;left:0px;height:100px;width:100px;background:#ff0000">
    </div>
    <div onmousedown="dragstart(this)" style="position:absolute;top:200px;left:0px;height:100px;width:100px;background:#00ff00">
      <p>Login+PW oder so...</p>
    </div>
  </body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
des schaffste, wennde per JS die Klasse/Style des Elements dynamisch erweiterst - z-index ist da das, was du brauchst. Zuerst haben beide z-index 0, klickste eines der Fenster an bekommts den z-index-wert 1, während das andre null ist. Klickste das andre fenster an setzt du dort den z-index auf 1, beim inaktiven Fenster auf 0.

Wenns just for learning ist, kannste des wohl so machen - ansonsten, warum nutzt du kein javascript framework?
 
Danke erstmal für die Antwort, ich bin mir aber nicht wirklich ganz sicher, wie ich das jetzt genau umsetzen kann. Kannst du mir da bitte nochmal eine kleine Hilfestellung geben?

Frameworks wollte ich erstmal nicht benutzen, da es mir bei diesem Projekt mehr um den Lerneffekt geht.

Edit:
Ist die Methode die ich oben für die bewegbaren Fenster benutzt habe eigentlich okay, oder gibt es da bessere Wege bewegbare Fenster darzustellen?
 
Zuletzt bearbeitet von einem Moderator:
Status
Für weitere Antworten geschlossen.
Zurück
Oben