Vue macht Div-Höhe verschiebbar

<Vorlage>
  <div id="eagleMapContainer" style="border: 1px durchgezogenes Rot;overflow-y: auto;" title="">
    <div id="tz" @mousedown="dragEagle" style="border: 1px solid blue;">
      <div title="Ziehen, um die Größe zu ändern" id="move_tz" style="border: 1px solid green;"></div>
    </div>
  </div>
</Vorlage>

<Skript>
  Standard exportieren {
    Name: "eagleMap",
    Daten() {
      zurückkehren {}
    },
    Methoden: {
      dragEagle: Funktion (e) {
        var targetDiv = document.getElementById('eagleMapContainer'); 
        //Breite und Höhe des Kartencontainers beim Klicken ermitteln:
        var ZielDivHeight = ZielDiv.OffsetHeight;
        var startX = e.clientX;
        var startY = e.clientY;
        var _this = dies;
        document.onmousemove = Funktion (e) {
          e.preventDefault();
          //Breite und Höhe des Mauszeigers ermitteln: den absoluten Wert nehmen var distX = Math.abs(e.clientX - startX);
          var distY = Math.abs(e.clientY - startY);
          //Nach oben ziehen:
          wenn (e.clientY < startY) {
            targetDiv.style.height = targetDivHeight + distY + 'px';
          }
          //Nach unten ziehen:
          wenn (e.clientX < startX && e.clientY > startY) {
            targetDiv.style.height = (targetDivHeight - distY) + 'px';
          }
          wenn (parseInt(targetDiv.style.height) >= 300) {
            ZielDiv.Stil.Höhe = 300 + "px";
          }
          wenn (parseInt(targetDiv.style.height) <= 150) {
            ZielDiv.Stil.Höhe = 150 + 'px';
          }
        }
        dokument.onmouseup = Funktion () {
          Dokument.onmousemove = null;
        }
      }
    },
  };
</Skript>

<Stilbereich>
  #eagleMapContainer {
    Position: absolut;
    links: 13%;
    unten: 10px;
    Z-Index: 200;
    Überlauf: versteckt;
    Sichtbarkeit: sichtbar;
    Breite: 200px;
    Höhe: 200px;
  }

  #tz {
    Position: absolut;
    rechts: 1px;
    oben: 1px;
    Breite: 27px;
    Höhe: 20px;
    Cursor:ne-Größe ändern;
    Z-Index: 200001;
    Hintergrundbild: URL("");

  }

  #tz:hover {
    Hintergrundfarbe: #666;
  }

  #move_tz {
    Position: absolut;
    rechts: 0px;
    oben: 0px;
    Breite: 27px;
    Höhe: 20px;
    Cursor:ne-Größe ändern;
    Z-Index: 100;
    Hintergrundbild: URL("");
    Hintergrundposition: 0px 0px;
  }
</Stil> 

<!-- Kleines Kästchen per Drag & Drop ziehen -->
    <div id="tz" @mousedown="dragEagle">
      <div title="Ziehen, um die Größe zu ändern" id="move_tz"></div>
    </div>

// ziehenEagle(e) {
        var targetDiv = document.getElementById('fuDiv');
        //Breite und Höhe des Kartencontainers beim Klicken ermitteln:
        var ZielDivHeight = ZielDiv.OffsetHeight;
        var startX = e.clientX;
        var startY = e.clientY;
        var _this = dies;
        document.onmousemove = Funktion (e) {
          e.preventDefault();
          //Breite und Höhe des Mauszeigers ermitteln: den absoluten Wert nehmen var distY = Math.abs(e.clientY - startY);

          //Nach oben ziehen:
          wenn (e.clientY < startY) {
            targetDiv.style.height = targetDivHeight - distY + 'px';
          }
          //Nach unten ziehen:
          wenn (e.clientX < startX && e.clientY > startY) {
            targetDiv.style.height = (targetDivHeight + distY) + 'px';
          }
          wenn (parseInt(targetDiv.style.height) >= 320) {
            ZielDiv.Stil.Höhe = 320 + 'px';
          }
          wenn (parseInt(targetDiv.style.height) <= 160) {
            ZielDiv.Stil.Höhe = 160 + "px";
          }
        }
        dokument.onmouseup = Funktion () {
          Dokument.onmousemove = null;
        }
      },

  #tz {
    Breite: 100 %;
    Höhe: 5px;
    Cursor: s-Größe ändern;
    Z-Index: 200001;
  }
  
  #move_tz {
    Breite: 100 %;
    Höhe: 5px;
    Cursor: s-Größe ändern;
    Z-Index: 100;
    Hintergrundbild: URL("");
    Hintergrundposition: 0px 0px;
  }