Jqueryui-draggable

JqueryUI-ドラッグ可能

jQueryUIには、DOM要素をドラッグ可能にする* draggable（）*メソッドが用意されています。 要素がドラッグ可能になったら、マウスで要素をクリックしてビューポート内の任意の場所にドラッグすることで、その要素を移動できます。

構文

• draggable（）*メソッドは2つの形式で使用できます-
• link：/jqueryui/jqueryui_draggable＃draggable_options [$（selector、context）.draggable（options）]メソッド
• link：/jqueryui/jqueryui_draggable＃draggable_methods [$（selector、context）.draggable（ "action"、[params]）]メソッド

[draggable_options]#

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

_draggable（options）_メソッドは、HTML要素をHTMLページ内で移動できることを宣言します。 _options_パラメーターは、関連する要素の動作を指定するオブジェクトです。

構文

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

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

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

次の表は、この方法で使用できるさまざまな_オプション_を示しています-

Sr.No.	Option & Description
1	addClasses このオプションを false に設定すると、 ui-draggable クラスが選択されたDOM要素のリストに追加されなくなります。 デフォルトでは、その値は true です。 オプション-addClasses * このオプションを false に設定すると、 ui-draggable クラスが選択されたDOM要素のリストに追加されなくなります。 デフォルトでは、その値は true です。 構文 $(".selector").draggable( { addClasses: false } );
2	appendTo ドラッグ中にドラッグ可能なヘルパーを追加する要素を指定します。 デフォルトでは、その値は「親」です。 オプション-appendTo * ドラッグ中にドラッグ可能なヘルパーを追加する要素を指定します。 デフォルトでは、その値は「親」です。 構文 $(".selector").draggable( { appendTo: "body"} );
3	axis このオプションは、水平（x）または垂直（y）軸へのドラッグを制限します。 可能な値：「x」、「y」。 オプション-軸 このオプションは、水平（x）または垂直（y）軸へのドラッグを制限します。 可能な値：「x」、「y」。 構文 $(".selector").draggable( { axis: "x" } );
4	cancel このオプションを使用して、指定した要素でドラッグが開始されないようにすることができます。 デフォルトでは、その値は「input、textarea、button、select、option」です。 オプション-キャンセル このオプションを使用して、指定した要素でドラッグが開始されないようにすることができます。 デフォルトでは、その値は「input、textarea、button、select、option」です 構文 $(".selector").draggable( { cancel: ".title" } );
5	connectToSortable このオプションを使用して、要素が交換可能なリストを指定できます。 配置の最後に、要素はリストの一部になります。 デフォルトでは、その値は「false」です。 オプション-connectToSortable * このオプションを使用して、要素が交換可能なリストを指定できます。 配置の最後に、要素はリストの一部になります。 デフォルトでは、その値は「false」です。 構文 $(".selector").draggable( { connectToSortable: "#my-sortable" } );
6	containment 指定された要素または領域の境界内にドラッグすることを制限します。 デフォルトでは、その値は「false」です。 オプション-封じ込め 指定された要素または領域の境界内にドラッグすることを制限します。 デフォルトでは、その値は「false」です。 構文 $(".selector").draggable( { containment: "parent" } );
7	cursor 要素が移動するときのカーソルCSSプロパティを指定します。 マウスポインターの形状を表します。 デフォルトでは、その値は「auto」です。 オプション-カーソル 要素が移動するときのカーソルCSSプロパティを指定します。 マウスポインターの形状を表します。 デフォルトでは、その値は「auto」です。 他の可能な値は- 「crosshair」（クロス） 「デフォルト」（矢印） 「ポインター」（手） 「移動」（2つの矢印が交差する） 「e-resize」（右に展開） 「ne-resize」（右に拡大） 「nw-resize」（左上に拡大） 「n-resize」（拡大） 「se-resize」（右下に展開） 「sw-resize」（左下に拡大） 「s-resize」（展開） 「auto」（デフォルト） 「w-resize」（左に展開） "text"（テキストを書き込むためのポインター） 「待機」（砂時計） "help"（ヘルプポインター） 構文 $(".selector").draggable( { cursor: "crosshair" } );
8	cursorAt マウスカーソルを基準としたドラッグヘルパーのオフセットを設定します。 座標は、1つまたは2つのキーの組み合わせを使用してハッシュとして与えることができます：\ {top、left、right、bottom}。 デフォルトでは、その値は「false」です。 オプション-cursorAt * マウスカーソルを基準としたドラッグヘルパーのオフセットを設定します。 座標は、1つまたは2つのキーの組み合わせを使用してハッシュとして与えることができます：\ {top、left、right、bottom}。 デフォルトでは、その値は「false」です。 構文 $(".selector").draggable( $( ".selector" ).draggable({ cursorAt: { left: 5 } }); );
9	delay マウスの最初の動きが考慮されるまでの遅延（ミリ秒）。 その時間の後に変位が始まる場合があります。 デフォルトでは、その値は「0」です。 オプション-遅延 マウスの最初の動きが考慮されるまでの遅延（ミリ秒）。 その時間の後に変位が始まる場合があります。 デフォルトでは、その値は「0」です。 構文 $(".selector").draggable( { delay: 300 } );
10	disabled trueに設定すると、アイテムを移動する機能が無効になります。 この機能が有効になるまで、アイテムは移動できません（ドラッグ可能（「有効」）命令を使用）。 デフォルトでは、その値は「false」です。 オプション-無効 trueに設定すると、アイテムを移動する機能が無効になります。 この機能が有効になるまで、アイテムは移動できません（ドラッグ可能（「有効」）命令を使用）。 デフォルトでは、その値は「false」です。 構文 $(".selector").draggable( { disabled: true } );
11	distance 変位を考慮する前にマウスを移動する必要があるピクセル数。 デフォルトでは、その値は「1」です。 オプション-距離 変位を考慮する前にマウスを移動する必要があるピクセル数。 デフォルトでは、その値は「false」です。 構文 $(".selector").draggable( { distance: 10 } );
12	grid xおよびyピクセルごとに、ドラッグヘルパーをグリッドにスナップします。 配列は[x、y]の形式でなければなりません。 デフォルトでは、その値は「false」です。 オプション-グリッド xおよびyピクセルごとに、ドラッグヘルパーをグリッドにスナップします。 配列は[x、y]の形式でなければなりません。 デフォルトでは、その値は「false」です。 構文 $(".selector").draggable( { grid: [ 50, 20 ] } );
13	handle 指定した場合、指定した要素でマウスダウンが発生しない限り、ドラッグの開始を制限します。 デフォルトでは、その値は「false」です。 オプション-ハンドル 指定した場合、指定した要素でマウスダウンが発生しない限り、ドラッグの開始を制限します。 デフォルトでは、その値は「false」です。 構文 $(".selector").draggable( { handle: "h2" } );
14	helper ディスプレイのドラッグにヘルパー要素を使用できるようにします。 デフォルトでは、その値は「オリジナル」です。 オプション-ヘルパー ディスプレイのドラッグにヘルパー要素を使用できるようにします。 デフォルトでは、その値は「オリジナル」です。 構文 $(".selector").draggable( { helper: "clone" } );
15	iframeFix ドラッグ中にiframeがmousemoveイベントをキャプチャしないようにします。 デフォルトでは、その値は「false」です。 オプション-iframeFix * ドラッグ中にiframeがmousemoveイベントをキャプチャしないようにします。 デフォルトでは、その値は「false」です。 構文 $(".selector").draggable( { iframeFix: true } );
16	opacity 移動するときに移動される要素の不透明度。 デフォルトでは、その値は「false」です。 オプション-不透明度 移動するときに移動される要素の不透明度。 デフォルトでは、その値は「false」です。 構文 $(".selector").draggable( { opacity: 0.35 } );
17	refreshPositions _true_に設定すると、すべてのマウス移動でドロップ可能な位置がすべて計算されます。 デフォルトでは、その値は「false」です。 オプション-refreshPositions * _true_に設定すると、すべてのマウス移動でドロップ可能な位置がすべて計算されます。 デフォルトでは、その値は「false」です。 構文 $(".selector").draggable( { refreshPositions: true } );
18	revert 移動の終了時に要素が元の位置に戻されるかどうかを示します。 デフォルトでは、その値は「false」です。 オプション-元に戻す 移動の終了時に要素が元の位置に戻されるかどうかを示します。 デフォルトでは、その値は「false」です。 構文 $(".selector").draggable( { revert: true } );
19	revertDuration 要素が元の位置に戻るまでの変位時間（ミリ秒）（options.revertを参照）。 デフォルトでは、その値は「500」です。 オプション-revertDuration * 要素が元の位置に戻るまでの変位時間（ミリ秒）（options.revertを参照）。 デフォルトでは、その値は「500」です。 構文 $(".selector").draggable( { revertDuration: 200 } );
20	scope droppableのacceptオプションに加えて、ドラッグ可能なアイテムとドロップ可能なアイテムのセットをグループ化するために使用します。 デフォルトでは、その値は「デフォルト」です。 オプション-スコープ droppableのacceptオプションに加えて、ドラッグ可能なアイテムとドロップ可能なアイテムのセットをグループ化するために使用します。 デフォルトでは、その値は「デフォルト」です。 構文 $(".selector").draggable( { scope: "tasks" } );
21	scroll true（デフォルト）に設定すると、アイテムがウィンドウの表示可能領域の外側に移動すると、ディスプレイがスクロールします。 デフォルトでは、その値は「true」です。 オプション-スクロール true（デフォルト）に設定すると、アイテムがウィンドウの表示可能領域の外側に移動すると、ディスプレイがスクロールします。 デフォルトでは、その値は「true」です。 構文 $(".selector").draggable( { scroll: false } );
22	scrollSensitivity ディスプレイをスクロールさせるためにマウスがウィンドウを出る必要があるピクセル数を示します。 デフォルトでは、その値は「20」です。 オプション-scrollSensitivity * ディスプレイをスクロールさせるためにマウスがウィンドウを出る必要があるピクセル数を示します。 デフォルトでは、その値は「20」です。 構文 $(".selector").draggable( { scrollSensitivity: 100 } );
23	scrollSpeed スクロールが開始されると、ディスプレイのスクロール速度を示します。 デフォルトでは、その値は「20」です。 オプション-scrollSpeed * スクロールが開始されると、ディスプレイのスクロール速度を示します。 デフォルトでは、その値は「20」です。 構文 $(".selector").draggable( { scrollSpeed: 100 } );
24	snap 他の要素（飛行している）上で移動されるアイテムの表示を調整します。 デフォルトでは、その値は「false」です。 オプション-スナップ 他の要素（飛行している）上で移動されるアイテムの表示を調整します。 デフォルトでは、その値は「false」です。 構文 $(".selector").draggable( { snap: true } );
25	snapMode 移動した要素と_options.snap_で示された要素の間で調整を行う方法を指定します。 デフォルトでは、その値は「両方」です。 オプション-snapMode * >移動された要素と_options.snap_で示された要素の間で調整を行う方法を指定します。 デフォルトでは、その値は「両方」です。 構文 $(".selector").draggable( { snapMode: "inner" } );
26	snapTolerance 調整を確立するために必要な位置の差の最大ピクセル数。 デフォルトでは、その値は「20」です。 オプション-snapTolerance * 調整を確立するために必要な位置の差の最大ピクセル数。 デフォルトでは、その値は「20」です。 構文 $(".selector").draggable( { snapTolerance: 30 } );
27	stack セレクタに一致する一連の要素のz-indexを制御し、常に現在ドラッグされているアイテムを前面に移動します。 ウィンドウマネージャーのようなもので非常に便利です。 デフォルトでは、その値は「false」です。 オプション-スタック セレクタに一致する一連の要素のz-indexを制御し、常に現在ドラッグされているアイテムを前面に移動します。 ウィンドウマネージャーのようなもので非常に便利です。 デフォルトでは、その値は「false」です。 構文 $(".selector").draggable( { stack: ".products" } );
28	zIndex ドラッグ中のヘルパーのZインデックス。 デフォルトでは、その値は「false」です。 オプション-zIndex * ドラッグ中のヘルパーのZインデックス。 デフォルトでは、その値は「false」です。 構文 $(".selector").draggable( { zIndex: 100 } );

次のセクションでは、ドラッグ機能のいくつかの実例を示します。

デフォルトの機能

次の例は、* draggable（）*メソッドにパラメーターを渡さないドラッグ可能な機能の簡単な例を示しています。

<!DOCTYPE html>
<html>
   <head>
      <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 { width: 150px; height: 150px; padding: 0.5em; background:#eee;}
      </style>

      <script>
         $(function() {
            $( "#draggable" ).draggable();
         });
      </script>
   </head>

   <body>
      <div id = "draggable" class = "ui-widget-content">
         <p>Drag me !!!</p>
      </div>
   </body>
</html>

上記のコードをHTMLファイル dragexample に保存し、JavaScriptをサポートする標準ブラウザで開きます。 次の出力も表示する必要があります。 今、あなたは結果で遊ぶことができます-

無効化、距離、および遅延の使用

次の例は、JqueryUIのドラッグ機能での3つの重要なオプション*（a）無効（b）遅延*および*（c）距離*の使用法を示しています。

<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>

   <body>
      <div id = "div1" style = "border:solid 1px;background-color:gainsboro;">
         <span>You can't move me!</span><br/><br/>
      </div>
      <div id = "div2" style = "border:solid 1px;background-color:grey;">
         <span>
            Dragging will start only after you drag me for 50px
         </span>
         <br/><br/>
      </div>
      <div id = "div3" style = "border:solid 1px;background-color:gainsboro;">
         <span>
            You have to wait for 500ms for dragging to start!
         </span>
         <br/><br/>
      </div>

      <script>
         $("#div1 span").draggable (
            { disabled: true }
         );
         $("#div2 span").draggable (
            { distance: 50 }
         );
         $("#div3 span").draggable (
            { delay: 500 }
         );
      </script>
   </body>
</html>

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

動きを制限する

次の例は、JqueryUIのドラッグ機能の containment オプションを使用して、画面上の要素の移動を制限する方法を示しています。

<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>

   <body>
      <div id = "div4" style = "border:solid 1px;background-color:gainsboro;">
         <span>You can drag me only within this div.</span><br/><br/>
      </div>
      <div id = "div5" style = "border:solid 1px;background-color:grey;">
         <span>You can drag me only along x axis.</span><br/><br/>
      </div>

      <script>
         $("#div4 span").draggable ({
            containment : "#div4"
         });
         $("#div5 span").draggable ({
            axis : "x"
         });
      </script>
   </body>
</html>

上記のコードをHTMLファイル dragexample に保存し、JavaScriptをサポートする標準ブラウザで開きます。 次の出力が生成されます。 今、あなたは出力で遊ぶことができます-

ここで、<span>要素は、IDがdiv4である<div>の外に出ることはできません。 また、「x」または「y」に相当するオプション_axis_を使用して、垂直または水平の動きに制約を課すこともできます。

複製してコンテンツを移動する

次の例は、選択した要素のクローンであるアイテムを移動する方法を示しています。 これは、オプション_helper_と値_clone_を使用して行われます。

<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>

   <body>
      <div id = "div6" style = "border:solid 1px;background:#eee; height:50px;">
         <span>You can duplicate me....</span>
      </div>

      <script>
         $("#div6 span").draggable ({
            helper : "clone"
         });
      </script>
   </body>
</html>

上記のコードをHTMLファイル dragexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

最初の要素がドラッグされていることを見るとわかるように、複製された要素のみが移動し、元のアイテムはそのままです。 マウスを離すと、複製された要素は消え、元のアイテムは元の位置のままです。

現在のオプション値を取得

次の例は、スクリプトの実行中にいつでもオプションの値を取得する方法を示しています。 ここでは、実行時に設定された cursor および cursorAt オプションの値を読み取ります。 同様の方法で、利用可能な他のオプションの値を取得できます。

<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>

   <body>
      <div id = "divX" style = "border:solid 1px;background:#eee; height:50px;">
         <span>Click anywhere on me to see cursor type...</span>
      </div>

      <script>
        /*First make the item draggable*/
         $("#divX span").draggable();

         $("#divX span").bind('click', function( event ) {
            var cursor = $( "#divX span" ).draggable( "option", "cursor" );
            var cursorAt = $( "#divX span" ).draggable( "option", "cursorAt" );
            alert("Cursor type - " + cursor + ", cursorAt - " + cursorAt);
         });
      </script>
   </body>
</html>

上記のコードをHTMLファイル dragexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

[draggable_methods]#

$（セレクター、コンテキスト）.draggable（ "action"、[params]）メソッド

_draggable（action、params）_メソッドは、移動を防ぐなど、可動要素に対してアクションを実行できます。 action は最初の引数で文字列として指定され、オプションで、指定されたアクションに基づいて1つ以上の params を提供できます。

'_基本的に、ここでのアクションは何もありませんが、文字列の形で使用できるjQueryメソッドです。_

構文

$(selector, context).draggable ("action", [params]);

次の表は、このメソッドのアクションを示しています-

Sr.No.	Action & Description
1	destroy() ドラッグ機能を完全に削除します。 要素は移動できなくなりました。 これにより、要素は初期化前の状態に戻ります。 アクション-destroy（） ドラッグ機能を完全に削除します。 要素は移動できなくなりました。 これにより、要素は初期化前の状態に戻ります。 構文 $(".selector").draggable("destroy");
2	disable() ドラッグ機能を無効にします。 要素は、次にdraggable（ "enable"）メソッドを呼び出すまで移動できません。 アクション-disable（） ドラッグ機能を無効にします。 要素は、次にdraggable（ "enable"）メソッドを呼び出すまで移動できません。 構文 $(".selector").draggable("disable");
3	enable() ドラッグ管理を再アクティブ化します。 要素は再び移動できます。 アクション-enable（） ドラッグ管理を再アクティブ化します。 要素は再び移動できます。 構文 $(".selector").draggable("enable");
4	option(optionName) 指定された_optionName_に現在関連付けられている値を取得します。 ここで、_optionName_は取得するオプションの名前で、タイプは_String_です。 アクション-オプション（オプション名） 指定された_optionName_に現在関連付けられている値を取得します。 ここで、_optionName_は取得するオプションの名前で、タイプは_String_です。 構文 var isDisabled = $( ".selector" ).draggable( "option", "disabled" );
5	option() 現在のドラッグ可能なオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。 アクション-option（） 現在のドラッグ可能なオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。 構文 var options = $( ".selector" ).draggable( "option" );
6	option(optionName, value) 指定された_optionName_に関連付けられたドラッグ可能なオプションの_value_を設定します。 ここで、_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。 アクション-オプション（オプション名、値） 指定された_optionName_に関連付けられたドラッグ可能なオプションの_value_を設定します。 ここで、_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。 構文 $( ".selector" ).draggable( "option", "disabled", true );
7	option(options) ドラッグ可能の1つ以上のオプションを設定します。 _options_は、設定するオプションと値のペアのマップです。 アクション-オプション（オプション） ドラッグ可能の1つ以上のオプションを設定します。 _options_は、設定するオプションと値のペアのマップです。 構文 $(".selector").draggable("option", { disabled: true } );
8	widget() ドラッグ可能な要素を含むjQueryオブジェクトを返します。 アクション-ウィジェット（） ドラッグ可能な要素を含むjQueryオブジェクトを返します。 構文 var widget = $(".selector ).draggable("widget");

例

ここで、上の表のアクションを使用した例を見てみましょう。 次の例は、アクション_disable_および_enable_の使用方法を示しています。

<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>

   <body>
      <div id = "div7" style = "border:solid 1px;background-color:gainsboro;">
         <span>You can't move me. Dragging is disabled.</span><br><br>
      </div>
      <div id = "div8" style = "border:solid 1px;background-color:grey;">
         <span>You can move me. Dragging is enabled.</span><br><br>
      </div>

      <script>
         $("#div7 span").draggable ();
         $("#div7 span").draggable ('disable');
         $("#div8 span").draggable ();
         $("#div8 span").draggable ('enable');
      </script>
   </body>
</html>

上記のコードをHTMLファイル dragexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力が表示されます-

ご覧のとおり、最初の要素が無効になり、2番目の要素のドラッグが有効になり、ドラッグを試みることができます。

移動した要素のイベント管理

前のセクションで見たドラッグ可能な（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。 これらのイベントメソッドは以下のとおりです-

Sr.No.	Event Method & Description
1	create(event, ui) ドラッグ可能が作成されたときにトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 イベント-create（event、ui） ドラッグ可能が作成されたときにトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 構文 $(".selector").draggable( create: function(event, ui) {} );
2	drag(event, ui) ドラッグ中にマウスが移動するとトリガーされます。 ここで、_event_は_Event_型であり、_ui_はヘルパー、位置、オフセットなどの_Object_型です。 イベント-drag（event、ui） ドラッグ中にマウスが移動するとトリガーされます。 ここで、_event_は_Event_型であり、_ui_はヘルパー、位置、オフセットなどの_Object_型です。 構文 $(".selector").draggable( drag: function(event, ui) {} );
3	start(event, ui) ドラッグの開始時にトリガーされます。 ここで、_event_は_Event_型であり、_ui_はヘルパー、位置、オフセットなどの_Object_型です。 イベント-start（event、ui） ドラッグの開始時にトリガーされます。 ここで、_event_は_Event_型であり、_ui_はヘルパー、位置、オフセットなどの_Object_型です。 構文 $(".selector").draggable( start: function( event, ui ) {} );
4	stop(event, ui) ドラッグが停止するとトリガーされます。 ここで、_event_は_Event_型であり、_ui_はヘルパー、位置、オフセットなどの_Object_型です。 イベント-停止（イベント、UI） ドラッグが停止するとトリガーされます。 ここで、_event_は_Event_型であり、_ui_はヘルパー、位置、オフセットなどの_Object_型です。 構文 $(".selector").draggable( stop: function( event, ui ) {} );

例

次の例は、ドラッグ機能中のイベントメソッドの使用を示しています。 この例は、_drag_イベントの使用を示しています。

<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>

   <body>
      <div id = "div9" style = "border:solid 1px;background-color:gainsboro;">
         <span>Drag me to check the event method firing</span><br/><br/>
      </div>

      <script>
         $("#div9 span").draggable ({
            cursor: "move",
            axis : "x",
            drag: function( event, ui ) {
               alert("hi..");
            }
         });
      </script>
   </body>
</html>

上記のコードをHTMLファイル dragexample に保存し、javascriptをサポートする標準のブラウザで開きます。次の出力が必要です-

書かれたコンテンツをドラッグしようとすると、ドラッグイベントの start が発生し、ダイアログボックスが表示され、カーソルが移動アイコンに変わり、テキストがX軸のみで移動することがわかります。