jqueryはドラッグアンドドロップを実装します-フロントエンドQ&A-php.cn

jqueryはドラッグアンドドロップを実装します

PHPz

リリース： 2023-05-25 10:07:07

オリジナル

1327 人が閲覧しました

現代の Web ページの人気に伴い、ユーザーと対話するドラッグ可能な要素はデザインの不可欠な部分になっています。 JQuery は、開発における多くの一般的な操作を簡素化する非常に人気のある JavaScript ライブラリです。機能の 1 つは、ドラッグ可能な要素の実装です。この記事では、JQuery を使用してドラッグ可能な要素を実装する方法を学びます。

1. HTML と CSS を作成する

JQuery コードの作成を開始する前に、ドラッグ可能な要素を実装するための HTML ページが必要です。ドラッグ可能な要素といくつかの基本的な CSS スタイルを備えた単純な HTML レイアウトを作成します。 HTML と CSS コードは次のとおりです。

<!DOCTYPE html>
<html>
   <head>
      <title>可拖拽实例</title>
      <style type="text/css">
         .draggable {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            color: #fff;
            text-align: center;
            line-height: 100px;
            position: absolute;
            cursor: move;
         }
      </style>
   </head>
   <body>
      <div class="draggable">可拖拽元素</div>
   </body>
</html>

ログイン後にコピー

このコードでは、ドラッグ可能な要素を含む単純な HTML ページを作成します。 CSS スタイルは、幅、高さ、色、位置など、ドラッグ可能な要素のスタイルを定義します。

2.JQuery ライブラリの導入

次に、JQuery ライブラリを導入する必要があります。 JQuery 公式 Web サイトから最新のライブラリファイルをダウンロードして、独自のプロジェクトに配置できます。あるいは、JQuery の CDN リンクを使用することもできます。次のコードをコードに追加します。

<!DOCTYPE html>
<html>
   <head>
      <title>可拖拽实例</title>
      <style type="text/css">
         .draggable {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            color: #fff;
            text-align: center;
            line-height: 100px;
            position: absolute;
            cursor: move;
         }
      </style>
      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
   </head>
   <body>
      <div class="draggable">可拖拽元素</div>
   </body>
</html>

ログイン後にコピー

コードには、例で使用できる JQuery の CDN リンクを追加しました。

3. JQuery コードの作成

次に、ドラッグ可能な要素の機能を実装するための JQuery コードの作成を開始します。 JQuery の中核はセレクターとイベントです。この例では、.mousemove() イベントと .css() メソッドを使用します。

<!DOCTYPE html>
<html>
   <head>
      <title>可拖拽实例</title>
      <style type="text/css">
         .draggable {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            color: #fff;
            text-align: center;
            line-height: 100px;
            position: absolute;
            cursor: move;
         }
      </style>
      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
      <script>
         $(document).ready(function() {
            var x = 0;
            var y = 0;
            var dragging = false;
            var element;
            $(".draggable").mousedown(function(e) {
               element = $(this);
               x = e.pageX - element.offset().left;
               y = e.pageY - element.offset().top;
               dragging = true;
            });
            $(document).mouseup(function() {
               dragging = false;
            });
            $(document).mousemove(function(e) {
               if (dragging) {
                  element.css({
                     top: e.pageY - y,
                     left: e.pageX - x
                  });
               }
            });
         });
      </script>
   </head>
   <body>
      <div class="draggable">可拖拽元素</div>
   </body>
</html>

ログイン後にコピー

コードでは、$(document).ready() を使用して、ページがロードされ、JQuery コードを実行できることを示します。

最初に 4 つの変数を定義します。x と y はマウスポインタと要素の左上隅の間の距離を保存し、ドラッグは要素がドラッグされているかどうかを検出するために使用され、要素は要素を保存するために使用されます。ドラッグされた要素。

$(".draggable").mousedown() を使用して、mousedown イベントを要素にバインドします。ユーザーが要素をクリックしてマウスを押すと、マウスポインタと要素の間の距離が記録され、ドラッグ変数が true に設定されます。

$(document).mouseup() を使用して、mouseup イベントをバインドし、ユーザーがマウスボタンを放したときを検出します。この場合、ドラッグ変数は false に設定されます。

最後に、$(document).mousemove() を使用して、mousemove イベントをバインドし、マウスの動きを検出します。要素がドラッグされている場合 (dragging = true)、.css() メソッドを使用して要素の上端と左端の値を設定し、要素をマウスポインターの下に移動します。

4. 効果をテストします

これで、ブラウザでコードを実行できるようになります。すべてが正しく動作すれば、ドラッグ可能な要素をクリックしてドラッグできるはずです。

テスト中に、ドラッグ可能な要素の動作を改善するために、コード内の特定の値を調整する必要がある場合があります。追加のスタイルと属性を追加して、プロジェクトのニーズに合わせて要素をカスタマイズすることもできます。

概要:

この記事では、JQuery を使用してドラッグ可能な要素を実装する方法を学びました。いくつかの簡単な HTML と CSS コードを作成し、JQuery ライブラリを追加しました。 .mousedown()、.mouseup()、.mousemove() イベントと .css() メソッドを使用して、ドラッグアンドドロップ機能を実装します。

JQuery を使用して独自のプロジェクトにドラッグ可能な要素を実装する場合、この記事で提供されているサンプルコードを出発点として使用し、ニーズに合わせてカスタマイズできます。読みやすさ、保守性、使いやすさを常に念頭に置いてください。

以上がjqueryはドラッグアンドドロップを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。