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

王林
リリース: 2023-05-11 21:39:05
オリジナル
431 人が閲覧しました

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

1. 機能要件

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

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

2. 実装手順

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

1. jQuery ライブラリの導入

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

ログイン後にコピー

2. HTML 要素の追加

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

元素1
元素2
元素3
元素4
元素5
ログイン後にコピー

このうち、.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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!