jQueryを水平方向にドラッグして削除します-フロントエンドQ&A-php.cn

jQueryを水平方向にドラッグして削除します

王林

リリース： 2023-05-11 21:39:05

オリジナル

533 人が閲覧しました

インターネットテクノロジーの継続的な発展に伴い、Web サイトページのインタラクティブ性に対する需要はますます高まっており、水平方向のドラッグと削除は、より一般的なインタラクションシナリオの 1 つです。この関数を実装する場合、jQuery はこの関数を迅速に実装するのに役立つ非常に便利なツールです。この記事では、jQueryを使って水平方向のドラッグと削除機能を実装する方法を詳しく紹介します。

1. 機能要件

具体的な実装の前に、まず機能要件を見てみましょう:

マウスが要素をクリックすると、要素がに変更するとドラッグ可能になります。
マウスを水平にドラッグすると、要素もマウスとともに移動します。
要素とページの右端との距離が一定の値に達すると、要素は自動的に消えます。
ドラッグプロセス中に、マウスを放すか、要素を指定した領域にドラッグすることで、要素を削除できます。

2. 実装手順

機能要件を念頭に置いて、具体的な実装を開始できます。具体的な手順は次のとおりです:

1. jQuery ライブラリの導入

この機能を実装する前に、まず HTML ページに jQuery ライブラリを導入する必要があります。この記事では、jQuery の CDN リンクを紹介します。コードは次のとおりです:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

ログイン後にコピー

2. HTML 要素の追加

HTML ページにドラッグして削除する必要がある要素を追加します。コードは次のとおりです。

<div class="item">元素1</div>
<div class="item">元素2</div>
<div class="item">元素3</div>
<div class="item">元素4</div>
<div class="item">元素5</div>

ログイン後にコピー

このうち、.item は各要素に追加したクラス名で、後で使用します。

3. CSS スタイルの追加

各要素に対応するスタイルを設定しますコードは次のとおりです:

.item {
    width: 100px;
    height: 100px;
    background-color: #ccc;
    border-radius: 5px;
    text-align: center;
    margin-right: 10px;
    float: left;
    cursor: move;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

ログイン後にコピー

このうち、幅、高さ、背景色、要素の円を設定し、コーナー、テキストの中央揃え、右マージン、フローティング、マウススタイルなどの関連プロパティと、フローティングを解除するための clearfix クラスを追加します。

4. JS インタラクションコードを追加します

ドラッグアンド削除機能を実現するために、対応する JS コードを追加します。コードは次のとおりです:

$(function () {
    var startX = 0;
    var endX = 0;
    var offsetX = 0;
    var isMoved = false;
 
    // 当鼠标按下时
    $('.item').on('mousedown', function (e) {
        startX = e.clientX;
        $(this).css('cursor', 'grabbing');
        isMoved = false;
    });
 
    // 当鼠标移动时
    $(document).on('mousemove', function (e) {
        if (startX === 0) {
            return;
        }
        endX = e.clientX;
        offsetX = endX - startX;
        $('.item').css('transform', 'translateX(' + offsetX + 'px)');
        if (Math.abs(offsetX) > 10) {
            isMoved = true;
        }
    });
 
    // 当鼠标抬起时
    $(document).on('mouseup', function () {
        $('.item').css('transform', 'translateX(0px)');
        $('.item').css('cursor', 'move');
 
        if (isMoved) {
            if (offsetX > 100) {
                $(this).remove();
            }
        }
        startX = 0;
        endX = 0;
        offsetX = 0;
        isMoved = false;
    });
});

ログイン後にコピー

上記のコードは、次のことを実現します。マウスが押されると、要素がマウスとともに移動するように、対応する transform 属性を要素に追加し、ドラッグプロセス中に要素を削除する必要があるかどうかを判断します。

3. 注意事項

水平方向のドラッグと削除機能を実装する場合は、次の点に注意する必要があります:

1. 対応する カーソルを追加します。各要素の Attributes により、マウスが要素上にあるときに、対応するマウススタイルが表示されます。

2. transform 属性を使用する場合、さまざまなブラウザーと互換性を持たせるために、特定のブラウザーカーネルを使用する必要があります。

3. ブラウザのフリーズを引き起こす頻繁な再描画を避けるために、マウス移動イベントに対して手ぶれ補正処理を実行する必要があります。

4. まとめ

上記の手順により、jQuery を使用した水平方向のドラッグと削除機能を実装することができました。実際の開発では、アニメーション効果を追加して、ユーザーインタラクションエクスペリエンスを向上させることもできます。この記事が皆様のお役に立てば幸いです。また、今後の実際の開発において、jQuery とその関連技術を柔軟に活用して、より豊かなインタラクティブ効果を実現していただければ幸いです。

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