Heim Web-Frontend Front-End-Fragen und Antworten jquery linke Folie zum Löschen

jquery linke Folie zum Löschen

May 14, 2023 am 09:19 AM

Bei der Entwicklung moderner Webanwendungen ist Interaktionsdesign oft ein entscheidender Bestandteil. Einer der entscheidenden Faktoren für eine gute Benutzererfahrung ist die angemessene Form der Interaktion.

Unter anderem wird Swipe-to-Delete häufig zum Löschen von Elementen wie Listenelementen oder Karten verwendet. Zum Beispiel das Löschen einer E-Mail in der E-Mail-Anwendung oder das Löschen eines Updates in der Anwendung für soziale Netzwerke usw.

In der herkömmlichen Webentwicklung erfordert die Implementierung des Löschens durch Wischen mit der linken Maustaste normalerweise viel manuelle Verarbeitung von DOM-Vorgängen und Stilkontrolle. Aber jetzt haben die von jQuery bereitgestellten Ereignis- und Animationsbibliotheken die Möglichkeit, das Wischen mit der linken Maustaste zum Löschen zu implementieren, erheblich vereinfacht und erweitert.

Als nächstes werden wir jQuery verwenden, um einen einfachen Löscheffekt durch Wischen mit der linken Maustaste zu implementieren.

  1. Grundlegende Interaktion implementieren

Zuerst müssen wir auf der HTML-Seite ein Containerelement definieren, das die Listenelemente enthält, und darin ein Blockelement hinzufügen, das die Schaltfläche „Löschen“ enthält. Hier wird das von der FontAwesome-Schriftsymbolbibliothek bereitgestellte Löschsymbol verwendet. Der Löschschaltfläche müssen einige grundlegende Stile hinzugefügt werden:

<div class="list-item">
    <span>这是一个列表项</span>
    <div class="delete"> <i class="fa fa-trash"></i> </div>
</div>

<style>
    .list-item {
        height: 50px;
        line-height: 50px;
        background-color: #fff;
        overflow: hidden;
        position: relative;
    }
    .delete {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        right: -50px;
        background-color: #f00;
        color: #fff;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }
</style>
Nach dem Login kopieren

Der obige Code definiert einen Listenelementcontainer mit einer Höhe von 50 Pixeln, der ein span-Element enthält (wird zur Anzeige des Listenelementinhalts verwendet) und ein Löschschaltflächenelement. Für das Containerelement ist das Attribut overflow:hidden festgelegt, um das Löschschaltflächenelement auszublenden. Das Schaltflächenelement „Löschen“ wird mit absoluter Positionierung und einem negativen Versatz auf der rechten Seite festgelegt, um den Animationseffekt zu erzielen, wenn zum Löschen nach links gewischt wird.

Als nächstes fügen Sie die jQuery-Mausberührungsereignisüberwachung für das Element der Löschtaste hinzu, um die Logik des Löschens durch Wischen mit der linken Maustaste zu verarbeiten. Aufgrund der Implementierung des Löschens durch Wischen mit der linken Maustaste bewirkt die Bewegungsdistanz der Maus im Wesentlichen, dass sich die Position der Löschtaste ändert, sodass das Mausbewegungsereignis überwacht werden muss.

$(document).on("mousemove swipeleft",".list-item",function(e){
    var $delete = $(this).find('.delete');
    var left = e.pageX - $(this).offset().left;   
    if (left > $(this).width()/2) {
        $delete.css('right', 0);
    } else {
        $delete.css('right', '-50px');
    }
});
Nach dem Login kopieren

Im obigen Code verwenden wir die on()-Methode von jQuery, um auf Mausbewegungen und Berührungsereignisse zu warten (linkes Folienereignis). Ermitteln Sie dann den Abstand der Maus relativ zur linken Seite des Elements und bestimmen Sie die Position der Löschschaltfläche basierend auf der halben Breite des Elements: Wenn der Mausbewegungsabstand die halbe Breite des Elements überschreitet, wird die Animation nach rechts versetzt des Löschschaltflächenelements geht auf 0 über, andernfalls geht die rechte Offset-Animation auf -50 Pixel über, um die Löschschaltfläche in das Element zu schieben.

  1. Löschvorgang hinzufügen

Nachdem Sie die Interaktion des Wischens mit der linken Maustaste zum Löschen verarbeitet haben, müssen Sie auch überlegen, wie Sie die Logik des Löschvorgangs implementieren. Eine einfache Möglichkeit, dies zu erreichen, besteht darin, Elemente mit der Methode „remove()“ von jQuery zu löschen. Die Implementierung hier besteht darin, einen Click-Event-Listener hinzuzufügen, nachdem die rechte Folie zum Löschen ausgelöst wurde, in der das Element durch Aufrufen der Methode „remove()“ aus dem DOM-Baum entfernt wird.

$(document).on("click",".delete",function(e){
    e.stopPropagation();
    $(this).parent().remove();
});
Nach dem Login kopieren

Im obigen Code verwenden wir die stopPropagation()-Methode von jQuery, um zu verhindern, dass Klickereignisse bis zum übergeordneten Element hochsprudeln und die Löschüberwachung durch Wischen nach links beeinträchtigen.

  1. Vollständiger Code

Durch Zusammenfügen der beiden oben genannten Codeteile können wir schließlich einen vollständigen jQuery-Implementierungscode zum Löschen der linken Folie erhalten.

<div class="list-item">
    <span>这是一个列表项</span>
    <div class="delete">
        <i class="fa fa-trash"></i>
    </div>
</div>

<style>
    .list-item {
        height: 50px;
        line-height: 50px;
        background-color: #fff;
        overflow: hidden;
        position: relative;
    }
    .delete {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        right: -50px;
        background-color: #f00;
        color: #fff;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).on("mousemove swipeleft",".list-item",function(e){
        var $delete = $(this).find('.delete');
        var left = e.pageX - $(this).offset().left;   
        if (left > $(this).width()/2) {
            $delete.css('right', 0);
        } else {
            $delete.css('right', '-50px');
        }
    });

    $(document).on("click",".delete",function(e){
        e.stopPropagation();
        $(this).parent().remove();
    });
</script>
Nach dem Login kopieren

Dieser Code ist nur ein einfaches Beispiel für das Löschen mit jQuery nach links. Er umfasst keine vollständige Detailverarbeitung und Eignungsoptimierung. Leser können entsprechend ihren eigenen Anforderungen entsprechende Änderungen und Erweiterungen vornehmen.

Das obige ist der detaillierte Inhalt vonjquery linke Folie zum Löschen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Erklären Sie das Konzept des faulen Ladens. Erklären Sie das Konzept des faulen Ladens. Mar 13, 2025 pm 07:47 PM

Erklären Sie das Konzept des faulen Ladens.

Was ist Useffizität? Wie verwenden Sie es, um Nebenwirkungen auszuführen? Was ist Useffizität? Wie verwenden Sie es, um Nebenwirkungen auszuführen? Mar 19, 2025 pm 03:58 PM

Was ist Useffizität? Wie verwenden Sie es, um Nebenwirkungen auszuführen?

Wie funktioniert der React -Versöhnungsalgorithmus? Wie funktioniert der React -Versöhnungsalgorithmus? Mar 18, 2025 pm 01:58 PM

Wie funktioniert der React -Versöhnungsalgorithmus?

Erläutern Sie den Zweck jeder Lebenszyklusmethode und ihres Anwendungsfalls. Erläutern Sie den Zweck jeder Lebenszyklusmethode und ihres Anwendungsfalls. Mar 19, 2025 pm 01:46 PM

Erläutern Sie den Zweck jeder Lebenszyklusmethode und ihres Anwendungsfalls.

Wie funktioniert das Currying in JavaScript und wie hoch sind ihre Vorteile? Wie funktioniert das Currying in JavaScript und wie hoch sind ihre Vorteile? Mar 18, 2025 pm 01:45 PM

Wie funktioniert das Currying in JavaScript und wie hoch sind ihre Vorteile?

Was sind Funktionen höherer Ordnung in JavaScript und wie können sie verwendet werden, um prägnanter und wiederverwendbarer Code zu schreiben? Was sind Funktionen höherer Ordnung in JavaScript und wie können sie verwendet werden, um prägnanter und wiederverwendbarer Code zu schreiben? Mar 18, 2025 pm 01:44 PM

Was sind Funktionen höherer Ordnung in JavaScript und wie können sie verwendet werden, um prägnanter und wiederverwendbarer Code zu schreiben?

Was sind die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten? Was sind die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten? Mar 19, 2025 pm 04:16 PM

Was sind die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten?

Was sind die Leistungsoptimierungstechniken von React (Memoisierung, Codeaufteilung, faules Laden)? Was sind die Leistungsoptimierungstechniken von React (Memoisierung, Codeaufteilung, faules Laden)? Mar 18, 2025 pm 01:57 PM

Was sind die Leistungsoptimierungstechniken von React (Memoisierung, Codeaufteilung, faules Laden)?

See all articles