JqueryUI-ドロップ可能

jQueryUIは提供します droppable() 指定されたターゲット（ドラッグ可能な要素のターゲット）でDOM要素をドロップ可能にするメソッド。

構文

ザ・ droppable() メソッドは2つの形式で使用できます-

  • $（セレクター、コンテキスト）.droppable（オプション）メソッド

  • $（selector、context）.droppable（ "action"、params）メソッド

$（セレクター、コンテキスト）.droppable（オプション）メソッド

ドロップ可能（オプション）メソッドは、HTML要素は、あなたが他の要素をドロップすることが可能な素子として用いることができることを宣言します。オプション関連する要素の動作を指定したオブジェクトであるパラメータ。

構文

$(selector, context).droppable (options);

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。提供するオプションが複数ある場合は、次のようにコンマを使用してそれらを区切ります-

$(selector, context).droppable({option1: value1, option2: value2..... });

次の表に、この方法で使用できるさまざまなオプションを示します。

シニア番号 オプションと説明
1 受け入れる
このオプションは、どのドラッグ可能な要素をドロップに受け入れるかを制御する必要がある場合に使用されます。デフォルトでは、その値は *。

Option - accept

このオプションは、どのドラッグ可能な要素をドロップに受け入れるかを制御する必要がある場合に使用されます。デフォルトでは、その値は* すべてのアイテムがdroppableによって受け入れられることを意味します。

これはタイプの可能性があります-

  • Selector −このタイプは、どのドラッグ可能な要素が受け入れられるかを示します。

  • Function−ページ上のドラッグ可能な要素ごとにコールバック関数が呼び出されます。ドラッグ可能な要素がdroppableによって受け入れられる場合、この関数はtrueを返す必要があります。

Syntax

$( ".selector" ).droppable(
   { accept: ".special" }
);
2 activeClass

このオプションは、受け入れられた要素（options.acceptに示されている要素の1つ）がドラッグされているときにドロップ可能な要素に追加される1つ以上のCSSクラスを表す文字列です。デフォルトでは、その値はfalse。

Option - activeClass

このオプションは、受け入れられた要素（options.acceptに示されている要素の1つ）がドラッグされているときにドロップ可能な要素に追加される1つ以上のCSSクラスを表す文字列です。デフォルトでは、その値はfalse。

Syntax

$( ".selector" ).droppable(
   { activeClass: "ui-state-highlight" }
);
3 addClasses

このオプションをfalseに設定すると、ui-droppableクラスがdroppable要素に追加されなくなります。デフォルトでは、その値はtrue。

Option - addClasses

このオプションをfalseに設定すると、ui-droppableクラスがdroppable要素に追加されなくなります。デフォルトでは、その値はtrue。これは、数百の要素で.droppable（） initを呼び出すときのパフォーマンスの最適化として必要になる場合があります。

Syntax

$( ".selector" ).droppable(
   { addClasses: false }
);
4 無効

このオプションをtrueに設定すると、ドロップ可能が無効になります。デフォルトでは、その値はfalse。

Option - disabled

このオプションをtrueに設定すると、ドロップ可能が無効になります。つまり、指定した要素上でのアイテムの移動と、それらの要素へのドロップが無効になります。デフォルトでは、その値はfalse。

Syntax

$( ".selector" ).droppable(
   { disabled: true }
);
5 貪欲

このオプションは、ネストされたドロップ可能オブジェクトにドロップするために受け入れるドラッグ可能な要素を制御する必要がある場合に使用されます。デフォルトでは、その値はfalse。このオプションがtrueに設定されている場合、親のドロップ可能オブジェクトは要素を受け取りません。

Option - greedy

このオプションは、ネストされたドロップ可能オブジェクトにドロップするために受け入れるドラッグ可能な要素を制御する必要がある場合に使用されます。デフォルトでは、その値はfalse。このオプションがtrueに設定されている場合、親のドロップ可能オブジェクトは要素を受け取りません。

Syntax

$( ".selector" ).droppable(
   { greedy: true }
);
6 hoverClass

このオプションは、受け入れられた要素（options.acceptで示される要素）がドロップ可能の要素に移動したときにドロップ可能の要素に追加される1つ以上のCSSクラスを表す文字列です。デフォルトでは、その値はfalse。

Option - hoverClass

このオプションは、受け入れられた要素（options.acceptで示される要素）がドロップ可能の要素に移動したときにドロップ可能の要素に追加される1つ以上のCSSクラスを表す文字列です。デフォルトでは、その値はfalse。

Syntax

$( ".selector" ).droppable(
   { hoverClass: "drop-hover" }
);
7 範囲

このオプションは、ドラッグ可能な要素のドロップ可能なアクションを、同じoptions.scope（ドラッグ可能な（options）で定義）を持つアイテムにのみ制限するために使用されます。デフォルトでは、その値は"default"。

Option - scope

このオプションは、ドラッグ可能な要素のドロップ可能なアクションを、同じoptions.scope（ドラッグ可能な（options）で定義）を持つアイテムにのみ制限するために使用されます。デフォルトでは、その値は"default"。

Syntax

$( ".selector" ).droppable(
   { scope: "tasks" }
);
8 許容範囲

このオプションは、ドラッグ可能オブジェクトがドロップ可能オブジェクト上にあるかどうかをテストするために使用するモードを指定する文字列です。デフォルトでは、その値は"intersect"。

Option - tolerance

このオプションは、ドラッグ可能な要素が、受け入れられるドロップのドロップ可能な要素をどのようにカバーするかを指定する文字列です。デフォルトでは、その値は"intersect"。可能な値は次のとおりです。

  • fit −ドラッグ可能はドロップ可能要素を完全にカバーします。

  • intersect −ドラッグ可能はドロップ可能要素と両方向で少なくとも50％オーバーラップします。

  • pointer −マウスポインタがドロップ可能な要素と重なっています。

  • touch −ドラッグ可能はドロップ可能に任意の量のタッチと重なります。

Syntax

$( ".selector" ).droppable(
   { tolerance: "fit" }
);

次のセクションでは、ドロップ機能のいくつかの実用的な例を示します。

デフォルトの機能

次の例は、ドロップ可能な機能の簡単な例を示しています。 droppable() 方法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #draggable-1 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0; 
         }
         #droppable-1 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 	
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-1" ).draggable();
            $( "#droppable-1" ).droppable();
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-1" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-1" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

上記のコードをHTMLファイルに保存しましょう dropexample.htmjavascriptをサポートする標準のブラウザで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

addClassの使用、無効および許容範囲

次の例は、3つのオプションの使用法を示しています (a) addClass (b) disabled そして (c) tolerance JqueryUIのドロップ関数で。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #draggable-2 { 
            width: 100px; height: 50px; padding: 0.5em; 
            margin: 0px 5px 10px 0; 	    
         }
         #droppable-2,#droppable-3, #droppable-4,#droppable-5 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
         }
      </style>

      <script>
         $(function() {
            $( "#draggable-2" ).draggable();
            $( "#droppable-2" ).droppable({
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#droppable-3" ).droppable({
               disabled : "true",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#droppable-4" ).droppable({
               tolerance: 'touch',
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped with a touch!" );
               }
            });
				
            $( "#droppable-5" ).droppable({
               tolerance: 'fit',
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped only when fully fit on the me!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-2" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-2" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
      <div id = "droppable-3" class = "ui-widget-header">
         <p>I'm disabled, you can't drop here!</p>
      </div>
      <div id = "droppable-4" class = "ui-widget-header">
         <p>Tolerance Touch!</p>
      </div>
      <div id = "droppable-5" class = "ui-widget-header">
         <p>Tolerance Fit!</p>
      </div>
   </body>
</html>

上記のコードをHTMLファイルに保存しましょう dropexample.htmjavascriptをサポートする標準のブラウザで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

次に、要素を「ToleranceTouch！」にドロップします。ボックス（このボックスの端に触れるだけ）で、ターゲット要素の変更を確認します。次に、要素を「ToleranceFit！」にドロップします。ターゲットの場合、ドラッグ可能な要素はターゲット要素と完全にオーバーラップする必要があります。つまり、「ToleranceFit！」です。目標。

ドロップする要素を選択してください

次の例は、オプションの使用法を示しています accept そして scope JqueryUIのドラッグ関数のオプション。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .wrap {
            display: table-row-group;
         }
         #japanpeople,#indiapeople, #javatutorial,#springtutorial { 
            width: 120px; height: 70px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0; 
         }
         
         #japan,#india,#java,#spring { 
            width: 140px; height: 100px;padding: 0.5em; float: left; 
            margin: 10px;  
         }
      </style>

      <script>
         $(function() {
            $( "#japanpeople" ).draggable();
            $( "#indiapeople" ).draggable();

            $( "#japan" ).droppable({
               accept: "#japanpeople",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#india" ).droppable({
               accept: "#indiapeople",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });

            $( "#javatutorial" ).draggable({scope : "java"});
            $( "#springtutorial" ).draggable({scope : "spring"});
				
            $( "#java" ).droppable({
               scope: "java",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#spring" ).droppable({
               scope: "spring",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            }); 
         });
      </script>
   </head>
   
   <body>
      <div class = "wrap" >
         <div id = "japanpeople" class = "ui-widget-content">
            <p>People to be dropped to Japan</p>
         </div>

         <div id = "indiapeople" class = "ui-widget-content">
            <p>People to be dropped to India</p>
         </div>

         <div id = "japan" class = "ui-widget-header">
            <p>Japan</p>
         </div>

         <div id = "india" class = "ui-widget-header">
            <p>India</p>
         </div>
      </div>
      <hr/>
         
      <div class = "wrap" >
         <div id = "javatutorial" class = "ui-widget-content">
            <p>People who want to learn Java</p>
         </div>
         <div id = "springtutorial" class = "ui-widget-content">
            <p>People who want to learn Spring</p>
         </div>
         <div id = "java" class = "ui-widget-header">
            <p>Java</p>
         </div>

         <div id = "spring" class = "ui-widget-header">
            <p>Spring</p>
         </div>
      </div>
   </body>
</html>

上記のコードをHTMLファイルに保存しましょう dropexample.htmjavascriptをサポートする標準のブラウザで開くと、次の出力が表示されます。これで、出力を試すことができます-

ここでは、要素「People from Japan」を「Japan」ターゲットにのみドロップでき、要素「PeoplefromIndia」をターゲットインドにドロップできることがわかります。同様に、「Javaを学びたい人」のスコープは「Java」をターゲットに設定され、「Springを学びたい人」のスコープは「Springターゲット」に設定されます。

外観の管理

次の例は、オプションの使用法を示しています activeClass そして hoverClass JqueryUIクラスの外観を管理するのに役立ちます。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style type = "text/css">
         #draggable-3 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 21px 5px 10px 0;
         }
         #droppable-6 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
         }
         .active {
            border-color : blue;
            background : grey;
         }  
         .hover {
            border-color : red;
            background : green;
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-3" ).draggable();
            $( "#droppable-6" ).droppable({
               activeClass: "active",
               hoverClass:  "hover",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-3" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-6" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

上記のコードをHTMLファイルに保存しましょう dropexample.htm javascriptをサポートする標準のブラウザで開くと、次の出力が表示されます-

「Dragmeto mytarget」要素を（ターゲット上で）ドラッグまたはホバーすると、ターゲット要素「Drophere」の色が変わることがわかります。

$（selector、context）.droppable（ "action"、params）メソッド

ドロップ可能（「アクション」、paramsは）方法は、ドロップ可能な機能を妨げるようなドロップ可能要素上のアクションを実行することができます。アクションは、最初の引数で文字列として指定されます（たとえば、ドロップを防ぐために「無効にする」）。次の表で、渡すことができるアクションを確認してください。

構文

$(selector, context).droppable ("action", params);;

次の表に、この方法で使用できるさまざまなアクションを示します。

シニア番号 アクションと説明
1 破壊

このアクションは、要素のドロップ可能な機能を完全に破壊します。要素は初期化前の状態に戻ります。

Action - destroy

このアクションは、要素のドロップ可能な機能を完全に破壊します。要素は初期化前の状態に戻ります。

Syntax

$( ".selector" ).droppable("destroy");
2 無効にする

このアクションは、ドロップ可能な操作を無効にします。要素はドロップ可能な要素ではなくなりました。このメソッドは引数を受け入れません。

Action - disable

このアクションは、ドロップ可能な操作を無効にします。要素はドロップ可能な要素ではなくなりました。このメソッドは引数を受け入れません。

Syntax

$( ".selector" ).droppable("disable");
3 有効にする

このアクションにより、ドロップ可能な操作が再度アクティブになります。要素は再びドロップ可能な要素を受け取ることができます。このメソッドは引数を受け入れません。

Action - enable

このアクションにより、ドロップ可能な操作が再度アクティブになります。要素は再びドロップ可能な要素を受け取ることができます。このメソッドは引数を受け入れません。

Syntax

$( ".selector" ).droppable("enable");
4 オプション

このアクションは、現在のドロップ可能なオプションハッシュを表すキーと値のペアを含むオブジェクトを取得します。このメソッドは引数を受け入れません。

Action - option

このアクションは、現在のドロップ可能なオプションハッシュを表すキーと値のペアを含むオブジェクトを取得します。このメソッドは引数を受け入れません。

Syntax

var options = $( ".selector" ).droppable( "option" );
5 option（optionName）

このアクションは、指定されたoptionNameに現在関連付けられているドロップ可能な要素の値を取得します。これは、引数として文字列値を取ります。

Action - option( optionName )

このアクションは、指定されたoptionNameに現在関連付けられているドロップ可能な要素の値を取得します。これは、引数として文字列値を取ります。

Syntax

var isDisabled = $( ".selector" ).droppable( "option", "disabled" );
6 option（optionName、value）

このアクションは、指定されたoptionNameに関連付けられたドロップ可能なオプションの値を設定します。

Action - option( optionName, value )

このアクションは、指定されたoptionNameに関連付けられたドロップ可能なオプションの値を設定します。引数optionNameは設定するオプションの名前であり、valueはオプションに設定する値です。

Syntax

$( ".selector" ).droppable( "option", "disabled", true );
7 option（options）

このアクションは、ドロップ可能オブジェクトの1つ以上のオプションを設定します。引数optionsは、設定するオプションと値のペアのマップです。

Action - option( options )

このアクションは、ドロップ可能オブジェクトの1つ以上のオプションを設定します。引数optionsは、設定するオプションと値のペアのマップです。

Syntax

$( ".selector" ).droppable( "option", { disabled: true } );
8 ウィジェット

このアクションは、droppable要素を含むjQueryオブジェクトを返します。このメソッドは引数を受け入れません。

このアクションは、droppable要素を含むjQueryオブジェクトを返します。このメソッドは引数を受け入れません。

Syntax

var widget = $( ".selector" ).droppable( "widget" );

例

次に、上記の表のアクションを使用した例を見てみましょう。次の例は、destroy（）メソッドの使用法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .draggable-4 { 
            width: 90px; height: 50px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0;
            border: 1px solid red;  
            background-color:#B9CD6D;
         }
         .droppable-7 { 
            width: 100px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
            border: 1px solid black; 
            background-color:#A39480;
         }
         .droppable.active { 
            background-color: red; 
         }
      </style>
      
      <script>
         $(function() {
            $('.draggable-4').draggable({ revert: true });
            $('.droppable-7').droppable({
               hoverClass: 'active',
               drop: function(e, ui) {
                  $(this).html(ui.draggable.remove().html());
                  $(this).droppable('destroy');
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "i'm destroyed!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "draggable-4"><p>drag 1</p></div>
      <div class = "draggable-4"><p>drag 2</p></div>
      <div class = "draggable-4"><p>drag 3</p></div>

      <div style = "clear: both;padding:10px"></div>

      <div class = "droppable-7">drop here</div>
      <div class = "droppable-7">drop here</div>
      <div class = "droppable-7">drop here</div>
   </body>
</html>

上記のコードをHTMLファイルに保存しましょう dropexample.htm javascriptをサポートする標準のブラウザで開くと、次の出力が表示されます-

「drophere」という名前の要素のいずれかに「drag1」をドロップすると、この要素がドロップされ、このアクションによって要素のドロップ可能な機能が完全に破壊されることがわかります。この要素に「drag2」と「drag3」を再度ドロップすることはできません。

ドロップ可能な要素のイベント管理

前のセクションで見たdroppable（options）メソッドに加えて、JqueryUIは、特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドを以下に示します-

シニア番号 イベントの方法と説明
1 activate（event、ui）

このイベントは、受け入れられたドラッグ可能な要素がドラッグを開始したときにトリガーされます。これは、ドロップ可能なときにドロップ可能な「ライトアップ」を作成する場合に役立ちます。

Event - activate(event, ui)

このイベントは、受け入れられたドラッグ可能な要素がドラッグを開始したときにトリガーされます。これは、ドロップ可能なときにドロップ可能な「ライトアップ」を作成する場合に役立ちます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。

  • draggable −ドラッグ可能な要素を表すjQueryオブジェクト。

  • helper −ドラッグされているヘルパーを表すjQueryオブジェクト。

  • position − {top、left}オブジェクトとしてのドラッグ可能なヘルパーの現在のCSS位置。

  • offset − {top、left}オブジェクトとしてのドラッグ可能なヘルパーの現在のオフセット位置。

Syntax

$( ".selector" ).droppable({
   activate: function( event, ui ) {}
});
2 create（event、ui）

このイベントは、ドロップ可能な要素が作成されたときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。

Event - create(event, ui)

このイベントは、ドロップ可能な要素が作成されたときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。

Syntax

$( ".selector" ).droppable({
   create: function( event, ui ) {}
});
3 deactivate（event、ui）

このイベントは、受け入れられたドラッグ可能オブジェクトがドラッグを停止したときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。

Event - deactivate(event, ui)

このイベントは、受け入れられたドラッグ可能オブジェクトがドラッグを停止したときにトリガーされます。ここで、eventはEvent型であり、uiはObject型であり、可能な型は−です。

  • draggable −ドラッグ可能な要素を表すjQueryオブジェクト。

  • helper −ドラッグされているヘルパーを表すjQueryオブジェクト。

  • position − {top、left}オブジェクトとしてのドラッグ可能なヘルパーの現在のCSS位置。

  • offset − {top、left}オブジェクトとしてのドラッグ可能なヘルパーの現在のオフセット位置。

Syntax

$(".selector").droppable(
   deactivate: function(event, ui) {}
);
4 drop（event、ui）

このアクションは、要素がドロップ可能オブジェクトにドロップされたときにトリガーされます。これは、許容範囲オプションに基づいています。ここで、eventはEvent型であり、uiはObject型です。

Event - drop(event, ui)

このアクションは、要素がドロップ可能オブジェクトにドロップされたときにトリガーされます。これは、許容範囲オプションに基づいています。ここで、eventはEvent型であり、uiはObject型であり、可能な型は−です。

  • draggable −ドラッグ可能な要素を表すjQueryオブジェクト。

  • helper −ドラッグされているヘルパーを表すjQueryオブジェクト。

  • position − {top、left}オブジェクトとしてのドラッグ可能なヘルパーの現在のCSS位置。

  • offset − {top、left}オブジェクトとしてのドラッグ可能なヘルパーの現在のオフセット位置。

Syntax

$(".selector").droppable(
   drop: function(event, ui) {}
);
5 out（event、ui）

このイベントは、受け入れられたドラッグ可能な要素がドロップ可能な要素からドラッグされたときにトリガーされます。これは、許容範囲オプションに基づいています。ここで、eventはEvent型であり、uiはObject型です。

Event - out(event, ui)

このイベントは、受け入れられたドラッグ可能な要素がドロップ可能な要素からドラッグされたときにトリガーされます。これは、許容範囲オプションに基づいています。ここで、eventはEvent型であり、uiはObject型です。

Syntax

$(".selector").droppable(
   out: function(event, ui) {}
);
6 over（event、ui）

このイベントは、受け入れられたドラッグ可能な要素がドロップ可能な要素の上にドラッグされたときにトリガーされます。これは、許容範囲オプションに基づいています。ここで、eventはEvent型であり、uiはObject型です。

Event - over(event, ui)

このイベントは、受け入れられたドラッグ可能な要素がドロップ可能な要素の上にドラッグされたときにトリガーされます。これは、許容範囲オプションに基づいています。ここで、eventはEvent型であり、uiはObject型であり、可能な型は−です。

  • draggable −ドラッグ可能な要素を表すjQueryオブジェクト。

  • helper −ドラッグされているヘルパーを表すjQueryオブジェクト。

  • position − {top、left}オブジェクトとしてのドラッグ可能なヘルパーの現在のCSS位置。

  • offset − {top、left}オブジェクトとしてのドラッグ可能なヘルパーの現在のオフセット位置。

Syntax

$(".selector").droppable(
   over: function(event, ui) {}
);

例

次の例は、ドロップ機能中のイベントメソッドの使用法を示しています。この例は、イベントdrop、over、outの使用法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #draggable-5 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0; 
         }
         #droppable-8 {    
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-5" ).draggable();
            $("#droppable-8").droppable({
               drop: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               },  
					
               over: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "moving in!" );
               },
               out: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "moving out!" );
               }      
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-5" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-8" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

上記のコードをHTMLファイルに保存しましょう dropexample.htm javascriptをサポートする標準のブラウザで開くと、次の出力が表示されます-

ここでは、要素をドラッグすると、ドロップ可能な要素のメッセージがどのように変化するかがわかります。

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved