Ergebnis 1 bis 6 von 6
  1. #1
    duesentrieb.net ist offline Grünschnabel
    registriert
    06-01-2009
    Beiträge
    3

    Question DIV per Maus skalieren

    Hallo Forum!

    ich versuche mir gerade ein "Fenstersystem" auf DIV-Basis zu basteln. Ein für mich wichtiger Punkt ist, dass die Fenster per Maus verschiebbar und skalierbar sind. Das mit dem Verschieben funktioniert inzwischen Wunderbar, doch das Skalieren am gleichen Objekt macht mir Probleme.

    Ein abgespecktes Beispiel mit aktuellem Stand findet Ihr hier: Beispiel
    --> Das Beispiel funktioniert aus CSS-Gründen im Moment nur unter IE, nicht unter FF, darum kümmere ich mich später. Im Moment geht es nur um das JavaScript.

    Der Quellcode dieser Datei:
    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
      <head>
        <link href="style/div.css" rel="stylesheet" type="text/css">
    	<link href="style/main.css" rel="stylesheet" type="text/css">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test</title>
    
    	<script type="text/javascript" language="javascript">
    
    	   //Das Objekt, das gerade bewegt wird.
    	   var dragobjekt = null;
    
    	   // Position, an der das Objekt angeklickt wurde.
    	   var dragx = 0;
    	   var dragy = 0;
    
    	   // Mausposition
    	   var posx = 0;
    	   var posy = 0;
    	   
       
    	   // alle DivWins
    	   divWins = new Array();
    
    	   // Initialisierung der Überwachung der Events
    	   function draginit() {
    	      document.onmousemove = drag;
     	      document.onmouseup   = dragstop;
    	   }
    
    
     	   //Wird aufgerufen, wenn ein Objekt bewegt werden soll.
    	   function dragstart(element) {
     	      dragobjekt = element.parentNode;
    	      dragx = posx - dragobjekt.offsetLeft;
     	      dragy = posy - dragobjekt.offsetTop;
    	   }
    
    
    	   //Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.
    	   function dragstop() {
     	      dragobjekt=null;
    	   }
    
    
    	   //Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.
    	   function drag(ereignis) {
    	      posx = document.all ? window.event.clientX : ereignis.pageX;
     	      posy = document.all ? window.event.clientY : ereignis.pageY;
     	      if (dragobjekt != null) {
     	          dragobjekt.style.left = (posx - dragx) + "px";
      	          dragobjekt.style.top = (posy - dragy) + "px";
      	      }
    	   }
    	   
    	   //Wird zum öffnen eines neuen Fensters aufgerufen .
    	   function openDivWin(x, y, url){
    	      
    		  //Hauptdiv (äußerster Rahmen) öffnen
    		  var newDiv = document.createElement("div");
    	      document.getElementById('desktop').appendChild(newDiv);
    	      newDiv.className="divWin";
    		  
    		  //Größe des Hauptdivs anpassen und eine zufällige ID generieren
    		  newDiv.style.width = x;
    		  newDiv.style.height = y;
    		  var id = Math.random() * 100000000000000000;
    		  newDiv.id = id;
    		  
    		  divWins.splice(0, 0, id);
    		  
    		  newDiv.x_wert   = x;
    		  newDiv.y_wert   = y;
    		  
    		  
    		  //Kopfleiste des DIVs
    		  var headDiv = document.createElement("div");
    	      newDiv.appendChild(headDiv);
    		  headDiv.className="headDiv";
    		  headDiv.style.width = x;
    		  headDiv.id = id + 1
    		  		  
    		  //Befehlssymbole im Head-DIV (hier im Beispiel ohne Funktion)
    		  var headDivBefehl = document.createElement("div");
    	      newDiv.appendChild(headDivBefehl);
    		  headDivBefehl.className="headDivBefehl";
    		  headDivBefehl.style.left = x - 70;
    		  headDivBefehl.id = id + 2;
    		  headDivBefehl.innerHTML = '<img src="images/win_min.gif" border="0" >&nbsp;<img src="images/win_max.gif" border="0" >&nbsp;<img src="images/win_del.gif" border="0">';
    		  
    		  //Fußleiste des DIVs
    		  var footDiv = document.createElement("div");
    	      newDiv.appendChild(footDiv);
    		  footDiv.className="footDiv";
    		  footDiv.style.top = y - 20;
    		  footDiv.style.width = x;
    		  footDiv.id = id + 2;
    		  
    		  //Inhaltsbereich des DIVs
    		  var textDiv = document.createElement("div");
    	      newDiv.appendChild(textDiv);
    		  textDiv.className="textDiv";
    		  textDiv.style.height = y - 41;
    		  textDiv.style.width = x;
    		  textDiv.id = id + 3;
    
    		  
    	      headDiv.onmousedown = new Function("dragstart(this)");
    		  
    		    
    	   }  
    	</script>	
      </head>
    
      <body class="body" onLoad="draginit(); openDivWin(700,400, '')">
        <div id="desktop" class="desktop"></div>
      </body>
    
    </html>
    Verschoben werden kann nun dieses Fenster mit Klick und Halten auf die Titelleiste. Die Skalierung soll ebenso (vielleicht mit Klick auf eine kleine Grafik rechts unten im DIV wie bei einem Windowsfenster) funktionieren.

    Ich weis, dass ich die Skalierung genauso starten kann, wie das Verschieben. Ich schaff es nur nicht, dass die Überwachung, ob das Fenster verschoben werden soll, gleichzeitig aktiv ist mit einer Überwachung, ob das Fenster skaliert werden soll. (Ich hoffe ich hab mich klar ausgedrückt )

    Hat jemand eine Idee oder ein Codebeispiel oder gar eine Lösung wie ich das anstellen soll?


    Vielen Dank schonmal!

    Grüße
    Joe

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: DIV per Maus skalieren

    http://kkjs.kkapsner.de/tests/resize_test.html - Das mit dem dicken Rand ist verschiebbar.

  3. #3
    duesentrieb.net ist offline Grünschnabel
    registriert
    06-01-2009
    Beiträge
    3

    AW: DIV per Maus skalieren

    Super! Vielen Dank!
    Das ist im Prinzip genau das, was ich gesucht hatte.

    Ein Problem hab ich jedoch noch: Ich kriegs lokal noch nicht zum laufen.
    Wenn ich mir alle Dateien runterlade und lokal speicher und dabei auch die Dateistruktur der drei JS-Dateien (../) beachte, wirft mir der Browser in Zeile 17 Zeichen 3 ein "Objekt erwartet" aus (da is gar kein JS).

    Es scheint mit dem Aufruf der DebugConsole zusammenzuhängen.

    Brauche ich noch eine weitere Datei oder Rahmenbedingungen, welche ich übersehen habe?


    Gruß und nochmals vielen Dank
    Joe

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: DIV per Maus skalieren

    Das ist alles ziemlich tief in meinem Framework verankert - da brauchst du noch jede Menge andere Dateien - und zwar die, die in der nuetzlich.js nachgeladen werden (loadPlugin("nuetzlich/EIN_SCRIPT"); ) - die liegen in einem Subordner - "nuetzlich" - mit Endung .js.

    Wenn ich demnächst mal Zeit habe, bau' ich für das Framework eine Downloadseite.

  5. #5
    duesentrieb.net ist offline Grünschnabel
    registriert
    06-01-2009
    Beiträge
    3

    AW: DIV per Maus skalieren

    Hallo kkapsner,

    vielen Dank für Deine Hilfe! Ich habe mir einige Dinge bei Dir angeschaut und konnte so einiges lernen und anschließend das Ganze in meinem Quellcode so erweitern, dass es wie gewünscht funktioniert. - Der Königsweg also


    Nochmals vielen Dank und schöne Grüße

    Joe

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: DIV per Maus skalieren

    Freut mich, wenn du aus meinem Script was lernen konntest.

    Ja, das ist er Königsweg.


    PS: Wenn dir irgendwas aufgefallen ist, das nicht so toll gelöst wurde - sag's mir bitte.

Ähnliche Themen

  1. div mit der maus verschieben...
    Von ChefDeus im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 11-06-2008, 20:23
  2. Div aufscrollen per setInterval
    Von wÊs im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 02-11-2007, 08:43
  3. Position von Div per URL weitergeben
    Von kammerjaeger im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 28-06-2007, 23:18
  4. script das div id ändert ?
    Von darkstar im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 22-08-2006, 12:02
  5. div per maus verschiben
    Von Links im Forum JavaScript
    Antworten: 19
    Letzter Beitrag: 14-06-2006, 21:16

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •