jquery linke Folie zum Löschen

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>

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');
    }
});

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.

2. 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();
});

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.

3. 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>

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!