Das Ziehen eines Elements über den Bildschirm ist etwas, das fest in den Bereich von JavaScript fällt. Sie benötigen Zugriff auf DOM-Ereignisse wie Klicks und Mausbewegungen. Aber wir sind hier, um über CSS-Tricks zu sprechen, also machen wir es nur mit HTML und CSS!
Um es klarzustellen: Selbst wenn wir das mit HTML und CSS hinbekommen, ist alles, was wir tun, das Element über den Bildschirm ziehbar zu machen. Wenn Sie tatsächlich etwas tun müssen, als Ergebnis dieses Ziehens, sind Sie wieder im JavaScript-Bereich.
Dieser Trick stammt von Scott Kellum. Scott hat im Laufe der Jahre eine Reihe meiner absoluten Lieblings-CSS-Tricks gemacht, wie dieses super einfache @keyframes-Setup, das ein Element von den Bildschirmrändern abprallen lässt wie ein alter Bildschirmschoner, bis hin zu einer beeindruckenden Sass-gestützten Parallax-Technik.
Es gibt wirklich nur eine CSS-Eigenschaft, die uns beim Klicken und Ziehen helfen kann, und das ist die Browser-UI, die wir in Desktop-Browsern erhalten, wenn wir die Eigenschaft resize verwenden. Hier ist ein <div>, wo wir sie verwenden (zusammen mit overflow: hidden;, was eine Voraussetzung dafür ist, dass sie funktioniert)
Wenn Sie sich die Demo in einem Desktop-Browser ansehen, können Sie die untere rechte Ecke greifen und sie herumziehen.
Nun zum eigentlichen Trick.
Wir können dieses größenveränderbare Element in einen anderen Container legen. Dieser Container wächst in der Höhe natürlich, wenn das größenveränderbare Element seine Höhe ändert. Seine Breite ändert sich natürlich aufgrund von width: min-content;.
Jetzt haben wir ein Elternelement, das sich zusammen mit dem größenveränderbaren Element in der Größe ändert. Das ist wichtig, denn wir können andere Dinge in dieses Elternelement legen, die sich damit bewegen. Ich werde ein großes ✖ hineinlegen und es direkt über dem Resizer positionieren, mit pointer-events: none; darauf, damit ich immer noch die Größenänderung durchführen kann
pointer-events: none; auf dieses SVG × setzen, ist der Größenänderungsgriff immer noch voll funktionsfähig.Wenn wir nun sicherstellen, dass das größenveränderbare Element über opacity: 0; ausgeblendet ist, sieht es so aus, als hätten wir ein ziehbares Element aus dem Nichts geschaffen! Wir müssen die Zahlen möglicherweise ein wenig anpassen, um alles richtig auszurichten, aber es ist machbar
