jqueryの左スライドを削除します-フロントエンドQ&A-php.cn

jqueryの左スライドを削除します

WBOY

リリース： 2023-05-14 09:19:06

オリジナル

676 人が閲覧しました

最新の Web アプリケーションの開発では、インタラクションデザインが重要な部分となることがよくあります。優れたユーザーエクスペリエンスを決定する要因の 1 つは、適切な形式のインタラクションです。

その中でも、スワイプして削除は、リスト項目やカードなどの要素を削除するために広く使用されています。たとえば、メールアプリケーションでメールを削除したり、ソーシャルネットワークアプリケーションでアップデートを削除したりするなどです。

従来の Web 開発では、左スワイプ削除を実装するには、通常、DOM 操作とスタイル制御の多くの手動処理が必要です。しかし今では、jQuery によって提供されるイベントライブラリとアニメーションライブラリにより、左スワイプによる削除の実装方法が大幅に簡素化され、強化されました。

次に、jQuery を使用して、単純な左スワイプ削除効果を実装します。

基本的なインタラクションを実現する

まず、HTML ページで、リスト項目を含むコンテナ要素を定義し、それに削除ボタンを含むブロック要素を追加する必要があります。。ここでは、FontAwesome フォントアイコンライブラリによって提供される削除アイコンが使用されており、いくつかの基本スタイルを削除ボタンに追加する必要があります。

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

ログイン後にコピー

上記のコードは、高さ 50 ピクセルのリスト項目コンテナーを定義します。には、span 要素 (リスト項目の内容を表示するために使用) と削除ボタン要素が含まれます。コンテナ要素には、削除ボタン要素を非表示にするために overflow:hidden 属性が設定されています。削除ボタン要素は、絶対位置と右側の負のオフセットを使用して設定され、左にスライドして削除するときにアニメーション効果が得られます。

次に、左スワイプ削除のロジックを処理するために、削除ボタン要素の jQuery マウスタッチイベントモニタリングを追加します。左スワイプ削除の実装により、基本的にマウスの移動距離によって削除ボタンの位置が変化するため、マウス移動イベントを監視する必要があります。

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

ログイン後にコピー

上記のコードでは、jQuery の on() メソッドを使用して、マウスの動きとタッチイベント (左スライドイベント) をリッスンします。次に、要素の左側に対するマウスの距離を取得し、要素の幅の半分に基づいて削除ボタンの位置を決定します。マウスの移動距離が要素の幅の半分を超える場合、右オフセットアニメーションが表示されます。削除ボタン要素のは 0 に遷移します。それ以外の場合は、削除ボタンを要素内にスライドさせるために、オフセットアニメーションが -50px に遷移します。

削除操作の追加

削除のための左スワイプのインタラクションを処理した後、削除操作のロジックを実装する方法も検討する必要があります。これを実現する簡単な方法は、jQuery の Remove() メソッドを使用して要素を削除することです。ここでの実装は、削除する右のスライドがトリガーされた後にクリックイベントリスナーを追加し、remove() メソッドを呼び出すことで要素が DOM ツリーから削除されます。

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

ログイン後にコピー

上記のコードでは、jQuery の stopPropagation() メソッドを使用して、クリックイベントが親要素にバブルアップして左スワイプの削除監視に影響を与えるのを防ぎます。

完全なコード

最後に、コードの上記 2 つの部分を組み合わせることで、完全な jQuery 左スライド削除実装コードを取得できます。

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

ログイン後にコピー

このコードは、jQuery の左スワイプ削除の単純な例にすぎません。完全な詳細な処理や適合性の最適化は含まれていません。読者は、必要に応じて適切な修正や拡張を行うことができます。

以上がjqueryの左スライドを削除しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。