Resize DIV

[TIMS_Ralf]

Moin's !

Das kann doch nicht so schwer sein... !?
Möchte ein DIV mit der Maus beliebig verkleinern / vergrößeren lassen. Dazu ein Resize-Icon innerhalb des DIV's ( .Box ) unten rechts platzieen ( .IconResize ).
HTML und CSS im folgenden., dann das JS dazu,

<DIV CLASS="Box">
    <DIV CLASS="IconResize">
    </DIV>
</DIV>

.Box
{
 position:absolute;
 top:200px;
 left:200px;
 width:400px;
 height:300px;
 background:yellow;
}

.IconResize
{
  position:absolute;
  right:0;
  bottom:0;
  width:20px;
  height:20px;
  background:red;
  cursor:nw-resize;
}

Mein JS...
Die Console meldet, dass "ResizeBox" und "ResizeIcon" nicht definiert seien!?
Sind se aber doch. Komme da schon geich am Anfang nicht weiter...

var
ResizeBox = document.getElementById('Box'),                         // Box für Resize
ResizeIcon  = document.getElementById('IconResize'),            // Resize-Button
StartPosX=0,
StartPosY=0,
StartPosW=0,
StartPosH=0;

// Trigger je nach MausAktion auf Icon setzen
ResizeIcon.addEventListener('click', function init()
{
 ResizeIcon.removeEventListener('click', init, false);
 ResizeIcon.addEventListener('mousedown', initResize, false);
}, false);

// Init mit Zuweisung von Resize auf Box
function initResize(e)
{
 StartPosX = e.clientX;
 StartPosY = e.clientY;
 StartPosW = parseInt(document.defaultView.getComputedStyle(ResizeBox).width, 10);
 StartPosH = parseInt(document.defaultView.getComputedStyle(ResizeBox).height, 10);
 document.documentElement.addEventListener('mousemove', runResize, false);
 document.documentElement.addEventListener('mouseup', stopResize, false);
}

// Resize ausführen
function runResize(e)
{
 ResizeBox.style.width = (StartPosW + e.clientX - StartPosX) + 'px';
 ResizeBox.style.height = (StartPosH + e.clientY - StartPosY) + 'px';
}

// Resize Starten / Stoppen
function stopResize(e)
{
 document.documentElement.removeEventListener('mousemove', runResize, false);
 document.documentElement.removeEventListener('mouseup', stopResize, false);
}

Könnt' mir da mal wer büdde auf die Sprünge helfen...?
Danke!

 

[Sempervivum]

ResizeBox = document.getElementById('Box'),                         // Box für Resize
ResizeIcon  = document.getElementById('IconResize'),            // Resize-Button

"Box" und "ResizeIcon" sind Klassen, keine IDs. Benutze document.querySelector.
Ist das korrigiert, stellt sich heraus, dass die Funktion stopResize nicht definiert ist.

Das kann doch nicht so schwer sein... !?

Arbeiten mit der Mausposition ist schon nicht ganz ohne, und das dynamische Registrieren und Löschen von Eventlistenern erst recht.

BTW: Hast Du das selbst entwickelt?

 

[TIMS_Ralf]

Guten Morgen + vielen Dank!

Ääääh... Ja, sorry! Das ist mir bei der Übertragung für Euch passiert; hier der richige Code.

<DIV CLASS="Box" ID="Box">
    <DIV CLASS="IconResize" ID="IconResize">
    </DIV>
</DIV>

Die function "stopResize(e)" ist unten definiert - oder was meist Du?
Mit querySelector:

var
ResizeBox  = document.querySelector('Box'),                         // Box für Resize
ResizeIcon  = document.querySelector('IconResize'),            // Resize-Button
StartPosX=0,
StartPosY=0,
StartPosW=0,
StartPosH=0;

// Trigger je nach MausAktion auf Icon setzen
ResizeIcon.addEventListener('click', function init()
{
 ResizeIcon.removeEventListener('click', init, false);
 ResizeIcon.addEventListener('mousedown', initResize, false);
}, false);

// Init mit Zuweisung von Resize auf Box
function initResize(e)
{
 StartPosX = e.clientX;
 StartPosY = e.clientY;
 StartPosW = parseInt(document.defaultView.getComputedStyle(ResizeBox).width, 10);
 StartPosH = parseInt(document.defaultView.getComputedStyle(ResizeBox).height, 10);
 document.documentElement.addEventListener('mousemove', runResize, false);
 document.documentElement.addEventListener('mouseup', stopResize, false);
}

// Resize ausführen
function runResize(e)
{
 ResizeBox.style.width = (StartPosW + e.clientX - StartPosX) + 'px';
 ResizeBox.style.height = (StartPosH + e.clientY - StartPosY) + 'px';
}

// Resize Starten / Stoppen
function stopResize(e)
{
 document.documentElement.removeEventListener('mousemove', runResize, false);
 document.documentElement.removeEventListener('mouseup', stopResize, false);
}

Die Konsole meint: "Uncaught TypeError: ResizeIcon is null"... ist aber doch deklariert ?!
Vermute, dass das Irgendwieit dem Trigger zu tun hat !??? Alles andere scheint mit ok .... scheint mir
Event "e" ist auch überall drin ( einer meiner Lieblingsfehler...).

Antwort:
Das ist ein Snippet aus meinem "Archiv". Weiß nicht ob ich das mal selbst entwickelt habe; kann gut sein, dass ich es mal irgendwo gefunden habe. Aber irgendwie lief das damals schon nicht ;-)

 

[Sempervivum]

Die function "stopResize(e)" ist unten definiert - oder was meist Du?

Ups, mein Fehler, da habe ich wohl versäumt, nach unten zu scrollen.

Nachdem Du die IDs hinzu gefügt hast, kannst Du ruhig document.getElementById verwenden. Oder, wenn es querySelector ist, musst Du ein "#" davor setzen.

 

[TIMS_Ralf]

Alles gut

Ach Du.... ja . Mit

ResizeBox  = document.querySelector('#Box'),                         // Box für Resize
ResizeIcon = document.querySelector('#IconResize'),            // Resize-Button

meldet die Konsole keine Fehler mehr.
Trotzdem funzt das Resize nicht.... egal ob querySelektor oder getElementById

 

[Sempervivum]

Ich schrieb ja schon, dass das dynamische Registrieren von Eventlistenern nicht ohne ist. Vor allem dieses Konstrukt ist ziemlich abgefahren und schwer zu verstehen:

// Trigger je nach MausAktion auf Icon setzen
ResizeIcon.addEventListener('click', function init()
{
 ResizeIcon.removeEventListener('click', init, false);
 ResizeIcon.addEventListener('mousedown', initResize, false);
}, false);

Mag sein, dass man das irgend wie zum Laufen bringen kann aber empfehlenswert ist es auf keinen Fall.

Leider fehlt mir im Moment die Zeit, etwas Besseres auszuarbeiten. Vielleicht nimmt sich jemand anders der Sache an.

 

[Sempervivum]

PS: Wahrscheinlich braucht man da gar nicht einzusteigen, siehe hier:
resize - CSS: Cascading Style Sheets | MDN