Reiner CSS-Code zum Erzielen eines Drag-Effekts

Lassen Sie Ihrer Fantasie freien Lauf, auch mit CSS lassen sich Drag-Effekte erzielen.

1. Beispiel für Drag-Effekt

Dies ist ein sehr häufiger Effekt auf mobilen Geräten. Sie können ihn drücken und verschieben, wie beispielsweise bei der Touchscreen-Version der chinesischen Qidian-Website [1] unten:

Diese Art von Effekt lässt sich mit JS leicht erzielen. Es sind lediglich mehr Berechnungen, kritischere Szenarien und mehr Code erforderlich. Nach einigem Nachdenken stellte ich jedoch fest, dass CSS diesen Effekt fast erzielen kann. Lesen wir weiter.

2. CSS-Implementierungsprinzip

Im herkömmlichen Web ist das Scrollen von Seiten eine gängige Interaktion, die durch die Verwendung des Mausrads oder das direkte Ziehen der Bildlaufleiste erfolgt. Auf mobilen Geräten ist das allerdings anders: Hier können Sie durch einfaches Ziehen mit dem Finger über die Seite scrollen. Normalerweise scrollt eine Seite entweder vertikal oder horizontal. Was wäre, wenn sie in beide Richtungen scrollen könnte? Zum Beispiel

.dragbox{
  Breite: 300px;
  Höhe: 300px;
  Überlauf: automatisch
}
.dragcon{
  Breite: 500px;
  Höhe: 500px;
}

Solange die Breite und Höhe der internen Elemente größer als der Container sind, kann ein Scrollen in beide Richtungen erreicht werden (denken Sie daran, overflow:auto einzustellen), wie unten gezeigt

Normalerweise kann das Mausrad nur in eine Richtung gleichzeitig scrollen (durch Gedrückthalten der Umschalttaste kann in die andere Richtung gescrollt werden), aber auf Mobilgeräten können Sie den Inhalt direkt ziehen, um zu scrollen, wie unten gezeigt

Fügen Sie nun in der Mitte des Inhalts ein Element hinzu, das mit dem Inhaltsbereich scrollt.

Als nächstes verstecken Sie den Text hinter

Fühlt es sich ein bisschen zäh an? So einfach ist das Prinzip!

3. Details zur CSS-Implementierung

Bestimmen Sie zunächst das Größenverhältnis zwischen dem Drag-Ziel und dem Drag-Container. Angenommen, die Größe des Drag-Ziels ist w * h , dann ist es einfach, das Größenverhältnis zu ermitteln: Die interne Größe ist das Doppelte des Containers minus der Größe des Drag-Ziels.

.dragbox{
  Breite: 100 %;
  Höhe: 100%;
}
.dragcon{
  Breite: berechnet (200 % – b);
  Höhe: berechnet (200 % – h);
}

Beschreiben Sie es anhand eines dynamischen Bilds wie folgt (der orangefarbene Block in der Mitte stellt das Drag-Ziel dar)

4. CSS-Layout

Als nächstes müssen wir diese Funktion zur Seite hinzufügen. Hier sind zwei Layouts:

1. Feste Positionierung

Fügen Sie nun das vorherige Layout direkt zur Seite hinzu und fügen Sie eine feste Positionierung hinzu

<Text>
  ...andere Elemente auf der Seite <div class="dragbox">
    <div Klasse="dragcon"></div>
    <div class="ball"></div> <!--Element ziehen-->
  </div>
</body>

Die wichtigsten Stile sind wie folgt

.dragbox{
  Position: fest;
  links: 0;
  oben: 0;
  rechts: 0;
  unten: 0;
  Überlauf: automatisch
}

Die hierarchische Beziehung ist wie folgt

Auf diese Weise wird die Dragbox definitiv den ursprünglichen Teil der Seite abdecken, sodass Sie auch Zeigerereignisse hinzufügen müssen: keine; Fügen Sie gleichzeitig beim Ziehen Zeigerereignisse hinzu: alle

.dragbox{
  /*…*/
  Zeigerereignisse: keine;
}
.Ball{
  /*…*/
  Zeigerereignisse: alle;
}
.dragbox.aktiv{
  /*…*/
  Zeigerereignisse: alle;
}

Mit JS können Sie den äußeren Container zum Scrollen veranlassen, wenn Sie darauf drücken

ball.addEventListener('touchstart',(ev)=>{
   dragbox.classList.add('aktiv');
})
document.addEventListener('touchend',()=>{
   dragbox.classList.remove('aktiv');
})

Die tatsächliche Wirkung ist wie folgt

Der vollständige Code ist unter https://codepen.io/xboxyan/pen/PobwxBK verfügbar (für den PC-Zugriff schalten Sie bitte den Mobilmodus ein).

Sie können den folgenden QR-Code auch direkt scannen

1. Absolute Positionierung + Hierarchie

Aufgrund des Einflusses der festen Positionierungsebene muss das vorherige Layout JS verwenden, um den Status des Containers dynamisch zu ändern. Gibt es eine Möglichkeit, das Ziehen zu erreichen, ohne die Originalseite zu beeinträchtigen ? Schauen wir uns dieses Layout an, das absolute Positionierung verwendet

Hier müssen Sie einen Div- Container um die Originalseite wickeln, wie folgt

<Text>
  <div Klasse="Dragbox">
    <div Klasse="dragcon"></div>
    <div Klasse="Ball"></div>
  </div>
  <div class="body"> <!--Verwenden Sie eine einzelne Ebene, um das Scrollen der Seite zu erreichen-->
    ...andere Elemente auf der Seite</div>
</body>

Die wichtigsten Stile sind wie folgt

.dragbox{
  Position: absolut;
  Breite: 100 %;
  Höhe: 100%;
  Überlauf: automatisch;
}
.Körper{
  Position: relativ;
  Höhe: 100%;
  Überlauf: automatisch;
}
.Ball{
  Position: relativ;
  z-index: 10; /*Setze die Ebene des Drag-Ziels höher*/
}

Nun sieht die Hierarchie folgendermaßen aus:

Hier befindet sich der ursprüngliche Seiteninhalt hierarchisch zwischen der Dragbox und dem Drag-Ziel , sodass das Scrollen der ursprünglichen Seite beim Ziehen nicht beeinträchtigt wird und keine JS-Verarbeitung erforderlich ist.

Der vollständige Code ist unter https://codepen.io/xboxyan/pen/bGBNQxL verfügbar (für den PC-Zugriff schalten Sie bitte den Mobilmodus ein).

Sie können den folgenden QR-Code auch direkt scannen

Tipp: Von den beiden oben genannten Layoutmethoden ist die erste anpassbarer und hat keine Auswirkungen auf vorhandene Projekte. Die zweite bietet ein besseres Erlebnis, verwendet jedoch div als Seiten-Scrollcontainer und nimmt bestimmte Änderungen an der Seitenstruktur vor. Sie können je nach tatsächlicher Situation wählen.

5. CSS implementiert andere Funktionen

1. Adsorptionsfunktion

Oftmals muss es beim Ziehen der Enden automatisch an der Kante einrasten, wie in der Abbildung am Anfang des Artikels dargestellt. Welche Eigenschaften können also mit der Adsorption in Verbindung gebracht werden?

Die Antwort ist CSS Scroll Snap [2]

<Text>
  ...andere Elemente auf der Seite <div class="dragbox">
    <div Klasse="dragcon">EIN</div>
    <div class="dragcon">B</div>
    <div Klasse="Ball"></div>
  </div>
</body>

Die wichtigsten Stile sind:

.dragbox{
  ...
  Scroll-Snap-Typ: x obligatorisch;
}
.dragcon{
  Scrollen-Snap-Align: Start;
}

Die tatsächliche Wirkung ist wie folgt

Der vollständige Code ist unter https://codepen.io/xboxyan/pen/XWNJyPw verfügbar (für den PC-Zugriff aktivieren Sie bitte den Mobilmodus).

Sie können den folgenden QR-Code auch direkt scannen

1. Ausgangsposition festlegen

Standardmäßig befindet sich das Drag-Ziel nur in der unteren rechten Ecke. Wie können wir es in die untere linke Ecke bringen? Es ist ganz einfach. Das Ziehen wird hier durch den Scroll-Container implementiert, Sie müssen also nur scrollLeft oder scrollTop ändern .

dragbox.scrollLeft = 999;
dragbox.scrollTop = 999;

Darüber hinaus ist auch eine Umsetzung in reinem HTML möglich, wobei die Autofokus-Funktion des Elements zum automatischen Fokussieren auf den sichtbaren Bereich genutzt wird.

<div Klasse="dragcon">
  ...
  <button class="pos" autofocus></button> <!--Fügen Sie ein Autofokus-Element hinzu-->
</div>

Wenn Sie beispielsweise möchten, dass die Anfangsposition in der oberen linken Ecke liegt, fügen Sie einfach ein Autofokus-Element in der unteren rechten Ecke hinzu (natürlich müssen Sie auch die Transparenz einstellen, um es auszublenden) ~

1. Grenzen setzen

Jetzt ist die Grenze des Drag-Ziels der Bildschirmrand. Manchmal müssen Sie etwas Abstand lassen. Dies ist in CSS einfach zu bewerkstelligen. Sie können links/oben/rechts/unten , die Polsterung , den Rahmen usw. auf viele Arten ändern.

.dragbox{
  links: 10px;
  oben: 10px;
  rechts: 10px;
  unten: 10px;
  /*Rechteck: 10px;*/
}
.dragbox{
  Polsterung: 10px;
}

VI. Erläuterung und Zusammenfassung

Ursprünglich dachte ich, dass es keine Kompatibilitätsprobleme geben würde, aber nach tatsächlichen Tests stellte ich fest, dass es viele Probleme mit iOS gab, hauptsächlich das Problem des Safari-Scroll-Containers. Einige niedrigere Versionen von iOS scrollen beispielsweise nicht reibungslos und müssen

-webkit-overflow-scrolling:touch kann ein reibungsloses Scrollen und eine automatische Aufnahme erreichen, verursacht jedoch Hierarchieprobleme. Einige Dokumente beschreiben, dass durch Festlegen dieser Eigenschaft ein nativer Scroll-Container mit der höchsten Ebene erstellt wird. Außerdem gibt es das erste fixe Layout. Ist standardmäßig pointer-events: none eingestellt und nach touchstart auf auto gesetzt, schlägt das Scrollen unter iOS fehl, umgekehrt klappt es aber (die Demo ist iOS-kompatibel).

Zu den Vorteilen gehört, dass es die Flexibilität von CSS übernimmt, nahezu keine Kosten verursacht, leicht wiederverwendbar ist und natives Scrollen ohne Verzögerungen nutzt.

Es gibt jedoch einige Einschränkungen. Wenn die Größe des Drag-Ziels nicht festgelegt ist , müssen Sie möglicherweise JS verwenden, um es zu erhalten. Natürlich ist dies im Vergleich immer noch eine sehr kostengünstige Implementierungsmethode.

Rückblickend habe ich keine sehr obskuren Eigenschaften verwendet (Scroll-Snap könnte eine davon sein, ist aber immerhin eine Hilfsfunktion). Die Haupteffekte waren üblich. Dann habe ich durch Assoziation und Divergenz, basierend auf täglicher Akkumulation, die nativen Fähigkeiten vollständig erkundet und schließlich die erforderliche Interaktion abgeschlossen, was zu diesem Artikel führte.

Vielen Dank fürs Lesen, ich hoffe, es kann mich zu meiner zukünftigen Arbeit inspirieren.

Verweise

[1] Chinesische Qidian-Website: https://m.qidian.com/

[2] CSS Scroll Snap: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scroll_Snap

Dies ist das Ende dieses Artikels über den Code zum Implementieren von Drag-and-Drop-Effekten mit reinem CSS. Weitere relevante Inhalte zum Implementieren von Drag-and-Drop-Effekten mit CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!