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?