✔ Div draggen und resizen funktioniert nicht ganz

The_Maegges · 13. Januar 2008

Servus allerseits!

Ich habe derzeit ein kleines Problem mit dem Resizen eines DIV's in Verbindung mit Draggen.

Grundsätzlich habe ich vor, das Verhalten eines Fensters nachzubilden.
Draggen alleine funktioniert wunderbar.
Resizen alleine ebenfalls.
Zuerst Resizen und dann Draggen stellt ebenfalls kein Problem dar.
Aber wenn ich das Div zuerst Dragge, kann ich es anschliessend nicht mehr resizen.

Anzusehen ist das hier:
http://www.mmichel.de/stuff/test/dragresizetest.html

Das ist der Code des zugehörigen Javascripts:

Code:

var dragobjekt = null;

// Position, an der das Objekt angeklickt wurde.
var dragx = 0;
var dragy = 0;
var sizex = 0;
var sizey = 0;
// Mausposition
var posx = 0;
var posy = 0;
var dragorsize = 0; // 0 = drag, 1 = size

function draginit() {
 // Initialisierung der Überwachung der Events
  document.onmousemove = drag;
  document.onmouseup = dragstop;
}

function dragstart(element, mode) 
{
   //Wird aufgerufen, wenn ein Objekt bewegt werden soll. 
  if (mode == 0)
	  {
	  dragorsize = 0; //dragging
	  document.getElementById(element).style.zIndex += 1;
	  dragobjekt = document.getElementById(element);
	  dragx = posx - dragobjekt.offsetLeft;
	  dragy = posy - dragobjekt.offsetTop;
	  }
  if (mode == 1)
    {
	  dragorsize = 1; //resizing
	  dragobjekt = document.getElementById(element);
	  sizex = parseInt(dragobjekt.style.width);
	  sizey = parseInt(dragobjekt.style.height);
  }
    if (mode == 2) dragobjekt = null;
}

function dragstop() {
  dragobjekt=null;
}


function drag(ereignis) {
  posx = document.all ? window.event.clientX : ereignis.pageX;
  posy = document.all ? window.event.clientY : ereignis.pageY;
  if(dragobjekt != null)
  {
  	if (dragorsize == 0)
	{
		dragobjekt.style.left = (posx - dragx) + "px";
		dragobjekt.style.top = (posy - dragy) + "px";
	}
	  	if (dragorsize == 1)
	{
		if ((posx - dragobjekt.style.left) > 100) dragobjekt.style.width = parseInt(posx - dragobjekt.style.left-40) +"px";
		if ((posy - dragobjekt.style.top) > 100) dragobjekt.style.height = parseInt(posy - dragobjekt.style.top-40) +"px";		
	}  
  }	
}

Und so der Aufruf auf der HTML-Seite:

Code:

<body bgcolor="#000000" onLoad="draginit()">
	<div id="window" class="mainwindow">
		<div class="wndtopbar" onMouseDown="dragstart('window',0)"></div>
		<div class="resizer" onMouseDown="dragstart('window',1)"></div>
	</div>
</body>

Wie gesagt, mein Problem ist, dass ich nach dem erstmaligen Draggen eines DIV's dieses nicht mehr vergrössern/verkleinern kann.
Für jeden Tipp, der weiterhilft, um das zu beheben, wäre ich dankbar.

Ach ja, mootools würde ich nur ungern verwenden ;-)

Danke und Grüsse,
The_Maegges

FipsTheThief · 13. Januar 2008

Ich würde fertige Frameworks auch nur ungern verwenden

Hab nen bissel nach deinen Fehler gesucht war eigentlich logisch am Ende wenn man es weiß

Also bei deiner Drag Drop Geschichte mit Resize , wenn du den layer verschiebst setzt Du ja die Werte style.left und style.top für das Objekt fest. Also "200px,100px" etc.

Nun fängst an zu rechnen mit deinen Werten :

posx = 250;
dragObjekt.style.left = "200px";

posx-dragObjekt.style.left = Not a Number ! rumms und da fliegt er raus.

Hab das mal nen bissel angepasst nun bei mir funktionierte dies soweit.

Code:

function drag(ereignis) {
  //Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.
  posx = document.all ? window.event.clientX : ereignis.pageX;
  posy = document.all ? window.event.clientY : ereignis.pageY;
  
  if(dragobjekt != null)
  {
      if (dragorsize == 0)
    {
        dragobjekt.style.left = (posx - dragx) + "px";
        dragobjekt.style.top = (posy - dragy) + "px";
    }
    if (dragorsize == 1)
    {
        var left = dragobjekt.offsetLeft;
        var top = dragobjekt.offsetTop;
                
        if (posx - left > 100) 
            dragobjekt.style.width = posx-left+"px";
        if (posy - top > 100) 
            dragobjekt.style.height = posy-top+"px";        
    }  
  }    
}

The_Maegges · 14. Januar 2008

Klasse! Klappt wunderbar!

Jaja, da schaut man Tagelang auf etwas drauf und sieht den Wald von Bäumen nicht.
Vielen Dank auf jeden Fall für deinen Hinweis!

Beste Grüsse,
The_Maegges

✔ Div draggen und resizen funktioniert nicht ganz

The_Maegges

Erfahrenes Mitglied

FipsTheThief

Erfahrenes Mitglied

The_Maegges

Erfahrenes Mitglied

Neue Beiträge