Jqueryui-sortable

提供：Dev Guides
移動先:案内、検索

JqueryUI-ソート可能

jQueryUIは、マウスを使用してリストまたはグリッド内の要素を並べ替える* sortable（）*メソッドを提供します。 このメソッドは、最初のパラメーターとして渡された操作文字列に基づいてソート可能アクションを実行します。

構文

  • ソート可能な（）*メソッドは2つの形式で使用することができます-
  • link：/jqueryui/jqueryui_sortable＃sortable_options [$（selector、context）.sortable（options）]メソッド
  • link：/jqueryui/jqueryui_sortable＃sortable_methods [$（selector、context）.sortable（ "action"、[params]）]メソッド

[sortable_options]#

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

_sortable（options）_メソッドは、HTML要素に交換可能な要素が含まれることを宣言します。 _options_パラメーターは、並べ替え中に関係する要素の動作を指定するオブジェクトです。

構文

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

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

Sr.No. Option & Description
1

appendTo

このオプションは、_options.helper_で作成された新しい要素が移動/ドラッグ時に挿入される要素を指定します。 デフォルトでは、その値は parent です。

  • オプション-appendTo *

このオプションは、_options.helper_で作成された新しい要素が移動/ドラッグ時に挿入される要素を指定します。 デフォルトでは、その値は parent です。

これはタイプにすることができます-

  • Selector -これは、ヘルパーを追加する要素を指定するセレクターを示します。
  • jQuery -これは、ヘルパーを追加する要素を含むjQueryオブジェクトを示します。
  • 要素-ヘルパーを追加するドキュメントオブジェクトモデル（DOM）の要素。
  • 文字列-文字列「親」は、ヘルパーをソート可能なアイテムの兄弟にします。

構文 

$(".selector").sortable(
   { appendTo: document.body }
);
2

axis

このオプションは、移動軸を示します（「x」は水平、「y」は垂直）。 デフォルトでは、その値は false です。

オプション-軸

このオプションは、移動軸を示します（「x」は水平、「y」は垂直）。 デフォルトでは、その値は false です。

構文 

$(".selector").sortable(
   { axis: "x" }
);
3

cancel

このオプションは、セレクター要素のいずれかをクリックして要素のソートを防ぐために使用されます。 デフォルトでは、その値は "input、textarea、button、select、option" です。

オプション-キャンセル

このオプションは、セレクター要素のいずれかをクリックして要素のソートを防ぐために使用されます。 デフォルトでは、その値は "input、textarea、button、select、option" です。

構文 

$(".selector").sortable(
   { cancel: "a,button" }
);
4

connectWith

このオプションは、このソート可能からアイテムを受け入れることができる別のソート可能要素を識別するセレクタです。 これにより、1つのリストのアイテムを他のリストに移動でき、頻繁で便利なユーザー操作が可能になります。 省略すると、他の要素は接続されません。 これは一方向の関係です。 デフォルトでは、その値は false です。

  • オプション-connectWith *

このオプションは、このソート可能からアイテムを受け入れることができる別のソート可能要素を識別するセレクタです。 これにより、1つのリストのアイテムを他のリストに移動でき、頻繁で便利なユーザー操作が可能になります。 省略すると、他の要素は接続されません。 これは一方向の関係です。 デフォルトでは、その値は false です。

構文 

$(".selector").sortable(
   { connectWith: "#identifier" }
);
5

containment

このオプションは、変位が発生する要素を示します。 要素は、セレクター（リストの最初の項目のみが考慮されます）、DOM要素、または文字列 "parent"（親要素）または "window"（HTMLページ）で表されます。

オプション-封じ込め

このオプションは、変位が発生する要素を示します。

これはタイプにすることができます-

  • セレクタ-これはセレクタを示します。 要素はセレクターで表されます（リストの最初の項目のみが考慮されます）
  • 要素-コンテナとして使用するDOM要素。
  • String -コンテナとして使用する要素を識別する文字列。 可能な値は、parent（親要素）、_ document_、または_window_（HTMLページ）です。

構文 

$(".selector").sortable(
   { containment: "parent" }
);
6

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").sortable(
   { cursor: "move" }
);
7

cursorAt

マウスカーソルを基準としたドラッグヘルパーのオフセットを設定します。 座標は、1つまたは2つのキーの組み合わせを使用してハッシュとして与えることができます：\ {top、left、right、bottom}。 デフォルトでは、その値は「false」です。

  • オプション-cursorAt *

マウスカーソルを基準としたドラッグヘルパーのオフセットを設定します。 座標は、1つまたは2つのキーの組み合わせを使用してハッシュとして与えることができます：\ {top、left、right、bottom}。 デフォルトでは、その値は「false」です。

構文 

$(".selector").sortable(
   { cursorAt: { left: 5 } }
);
8

delay

マウスの最初の動きが考慮されるまでの遅延（ミリ秒）。 その時間の後に変位が始まる場合があります。 デフォルトでは、その値は「0」です。

オプション-遅延

マウスの最初の動きが考慮されるまでの遅延（ミリ秒）。 その時間の後に変位が始まる場合があります。 デフォルトでは、その値は「0」です。

構文 

$(".selector").sortable(
   { delay: 150 }
);
9

disabled

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

オプション-無効

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

構文 

$(".selector").sortable(
   { disabled: true }
);
10

distance

ソートを開始する前にマウスを移動する必要があるピクセル数。 指定した場合、マウスが距離を超えてドラッグされるまでソートは開始されません。 デフォルトでは、その値は「1」です。

オプション-距離

ソートを開始する前にマウスを移動する必要があるピクセル数。 指定した場合、マウスが距離を超えてドラッグされるまでソートは開始されません。 デフォルトでは、その値は「1」です。

構文 

$(".selector").sortable(
   { distance: 5 }
);
11

dropOnEmpty

このオプションを_false_に設定すると、このソート可能からのアイテムは、空の接続ソート可能にドロップできません。 デフォルトでは、その値は true です。

  • オプション-dropOnEmpty *

このオプションを_false_に設定すると、このソート可能からのアイテムは、空の接続ソート可能にドロップできません。 デフォルトでは、その値は true です。

構文 

$(".selector").sortable(
   { dropOnEmpty: false }
);
12

forceHelperSize

このオプションが_true_に設定されている場合、ヘルパーにサイズを強制します。 デフォルトでは、その値は false です。

  • オプション-forceHelperSize *

このオプションが_true_に設定されている場合、ヘルパーにサイズを強制します。 デフォルトでは、その値は false です。

構文 

$(".selector").sortable(
   { forceHelperSize: true }
);
13

forcePlaceholderSize

このオプションは、_true_に設定されている場合、アイテムが移動されるときのプレースホルダーのサイズを考慮します。 このオプションは、_options.placeholder_が初期化されている場合にのみ役立ちます。 デフォルトでは、その値は false です。

  • オプション-forcePlaceholderSize *

このオプションは、_true_に設定されている場合、アイテムが移動されるときのプレースホルダーのサイズを考慮します。 このオプションは、_options.placeholder_が初期化されている場合にのみ役立ちます。 デフォルトでは、その値は false です。

構文 

$(".selector").sortable(
   { forcePlaceholderSize: true }
);
14

grid

このオプションは配列[x、y]で、マウスの移動中にソート要素が水平および垂直に移動するピクセル数を示します。 デフォルトでは、その値は false です。

オプション-グリッド

このオプションは配列[x、y]で、マウスの移動中にソート要素が水平および垂直に移動するピクセル数を示します。 デフォルトでは、その値は false です。

構文 

$(".selector").sortable(
   { grid: [ 20, 10 ] }
);
15

handle

指定した場合、指定した要素でマウスダウンが発生しない限り、ソートの開始を制限します。 デフォルトでは、その値は false です。

オプション-ハンドル

指定した場合、指定した要素でマウスダウンが発生しない限り、ソートの開始を制限します。 デフォルトでは、その値は false です。

構文 

$(".selector").sortable(
   { handle: ".handle" }
);
16

helper

ディスプレイのドラッグにヘルパー要素を使用できるようにします。 デフォルトでは、その値は original です。

オプション-ヘルパー

ディスプレイのドラッグにヘルパー要素を使用できるようにします。 デフォルトでは、その値は original です。 可能な値は-

  • String -「clone」に設定すると、要素が複製され、複製がドラッグされます。
  • 関数-ドラッグ中に使用するDOMElementを返す関数。

構文 

$(".selector").sortable(
   { helper: "clone" }
);
17

items

このオプションは、DOM要素内のどのアイテムをソートするかを指定します。 デフォルトでは、その値は*> **です。

オプション-アイテム

このオプションは、DOM要素内のどのアイテムをソートするかを指定します。 デフォルトでは、その値は*> **です

構文 

$(".selector").sortable(
   { items: "> li" }
);
18

opacity

このオプションは、ソート中のヘルパーの不透明度を定義するために使用されます。 デフォルトでは、その値は false です。

オプション-不透明度

このオプションは、ソート中のヘルパーの不透明度を定義するために使用されます。 デフォルトでは、その値は false です。

構文 

$(".selector").sortable(
   { opacity: 0.5 }
);
19

placeholder

このオプションは、それ以外の場合は空白に適用されるクラス名に使用されます。デフォルトでは、値は false です。

オプション-プレースホルダー

構文 

$(".selector").sortable(
   { addClasses: false }
);
20

revert

このオプションは、スムーズなアニメーションを使用して、ソート可能なアイテムを新しい位置に戻すかどうかを決定します。 デフォルトでは、その値は false です。

オプション-元に戻す

このオプションは、スムーズなアニメーションを使用して、ソート可能なアイテムを新しい位置に戻すかどうかを決定します。 デフォルトでは、その値は false です。

構文 

$(".selector").sortable(
   { revert: true }
);
21

scroll

このオプションは、スクロールを有効にするために使用されます。 _true_に設定すると、ページは端に来たときにスクロールします。 デフォルトでは、その値は true です。

オプション-スクロール

このオプションは、スクロールを有効にするために使用されます。 _true_に設定すると、ページは端に来たときにスクロールします。 デフォルトでは、その値は true です。

構文 

$(".selector").sortable(
   { scroll: false }
);
22

scrollSensitivity

このオプションは、スクロールを発生させるためにマウスが可視領域を出る必要があるピクセル数を示します。 デフォルトでは、その値は 20 です。 このオプションは、options.scrollがtrueに設定されている場合にのみ使用されます。

  • オプション-scrollSensitivity *

このオプションは、スクロールを発生させるためにマウスが可視領域を出る必要があるピクセル数を示します。 デフォルトでは、その値は 20 です。 このオプションは、options.scrollがtrueに設定されている場合にのみ使用されます。

構文 

$(".selector").sortable(
   { scrollSensitivity: 10 }
);
23

scrollSpeed

このオプションは、スクロールが開始された後のディスプレイのスクロール速度を示します。 デフォルトでは、その値は 20 です。

  • オプション-scrollSpeed *

このオプションは、スクロールが開始された後のディスプレイのスクロール速度を示します。 デフォルトでは、その値は 20 です。

構文 

$(".selector").sortable(
   { scrollSpeed: 40 }
);
24

tolerance

このオプションは、移動するアイテムが別のアイテムの上にあるかどうかをテストするために使用するモードを指定する_String_です。 デフォルトでは、その値は "intersect" です。

オプション-公差

このオプションは、移動するアイテムが別のアイテムの上にあるかどうかをテストするために使用するモードを指定する_String_です。 デフォルトでは、その値は "intersect" です。可能な値は-

  • inters -アイテムは他のアイテムと少なくとも50％オーバーラップします。
  • pointer -マウスポインターが他のアイテムと重なっています。

構文 

$(".selector").sortable(
   { tolerance: "pointer" }
);
25

zIndex

このオプションは、ソート中の要素/ヘルパーのz-indexを表します。 デフォルトでは、その値は 1000 です。

  • オプション-zIndex *

このオプションは、ソート中の要素/ヘルパーのZ-indexを表します。 デフォルトでは、その値は 1000 です。

構文 

$(".selector").sortable(
   { zIndex: 9999 }
);

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

デフォルトの機能

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

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</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>
         #sortable-1 { list-style-type: none; margin: 0;
            padding: 0; width: 25%; }
         #sortable-1 li { margin: 0 3px 3px 3px; padding: 0.4em;
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>

      <script>
         $(function() {
            $( "#sortable-1" ).sortable();
         });
      </script>
   </head>

   <body>
      <ul id = "sortable-1">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
         <li class = "default">Product 5</li>
         <li class = "default">Product 6</li>
         <li class = "default">Product 7</li>
      </ul>
   </body>
</html>

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

上記の製品を再配置し、マウスを使用してアイテムをドラッグします。

オプションの使用遅延と距離

次の例は、JqueryUIのソート関数で3つのオプション*（a）delay および（b）distance *を使用する方法を示しています。 

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</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>
         #sortable-2, #sortable-3 { list-style-type: none; margin: 0;
            padding: 0; width: 25%; }
         #sortable-2 li, #sortable-3 li { margin: 0 3px 3px 3px; padding: 0.4em;
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>

      <script>
         $(function() {
            $( "#sortable-2" ).sortable({
               delay:500
            });
            $( "#sortable-3" ).sortable({
               distance:30
            });
         });
      </script>
   </head>

   <body>
      <h3>Delay by 500ms</h3>
      <ul id = "sortable-2">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
      </ul>
      <h3>Distance Delay by 30px</h3>
      <ul id = "sortable-3">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
      </ul>
   </body>
</html>

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

上記の製品を再配置し、マウスを使用してアイテムをドラッグします。 遅延（時間）または距離による誤ったソートを防ぐために、_delay_オプションでソートを開始する前に要素をドラッグする必要があるミリ秒数を設定しました。 また、_distance_オプションでソートを開始する前に要素をドラッグする必要がある距離をピクセル単位で設定しました。

プレースホルダーの使用

次の例は、JqueryUIのsort関数で3つのオプション placeholder を使用する方法を示しています。 

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</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>
         #sortable-4 { list-style-type: none; margin: 0;
            padding: 0; width: 25%; }
         #sortable-4 li { margin: 0 3px 3px 3px; padding: 0.4em;
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .highlight {
            border: 1px solid red;
            font-weight: bold;
            font-size: 45px;
            background-color: #333333;
         }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>

      <script>
         $(function() {
            $( "#sortable-4" ).sortable({
               placeholder: "highlight"
            });
         });
      </script>
   </head>

   <body>
      <ul id = "sortable-4">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
         <li class = "default">Product 5</li>
         <li class = "default">Product 6</li>
         <li class = "default">Product 7</li>
      </ul>
   </body>
</html>

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

アイテムをドラッグして再配置します。アイテムをドラッグしている間、プレースホルダー（_highlight_クラスを使用してこのスペースのスタイルを設定します）が利用可能な場所に表示されます。

オプションConnectwithおよびDroponemptyの使用

次の例は、JqueryUIのsort関数での3つのオプション*（a）connectWith および（b）dropOnEmpty *の使用法を示しています。 

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</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>
         #sortable-5, #sortable-6,#sortable-7 {
            list-style-type: none; margin: 0; padding: 0;
            width: 20%;float:left }
         #sortable-5 li, #sortable-6 li,#sortable-7 li {
            margin: 0 3px 3px 3px; padding: 0.4em;
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>

      <script>
         $(function() {
            $( "#sortable-5, #sortable-6" ).sortable({
               connectWith: "#sortable-5, #sortable-6"
            });
            $( "#sortable-7").sortable({
               connectWith: "#sortable-5",
               dropOnEmpty: false
            });
         });
      </script>
   </head>

   <body>
      <ul id = "sortable-5"><h3>List 1</h3>
         <li class = "default">A</li>
         <li class = "default">B</li>
         <li class = "default">C</li>
         <li class = "default">D</li>
      </ul>
      <ul id = "sortable-6"><h3>List 2</h3>
         <li class = "default">a</li>
         <li class = "default">b</li>
         <li class = "default">c</li>
         <li class = "default">d</li>
      </ul>
      <ul id = "sortable-7"><h3>List 3</h3>
         <li class = "default">e</li>
         <li class = "default">f</li>
         <li class = "default">g</li>
         <li class = "default">h</li>
      </ul>
   </body>
</html>

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

セレクタを_connectWith_オプションに渡すことにより、リスト1から別のリスト1（リスト2）にアイテムをソートします。 これは、すべての関連リストをCSSクラスでグループ化してから、そのクラスをソート可能な関数に渡します（つまり、connectWith： '＃sortable-5、＃sortable-6'）。

リスト3の下のアイテムをリスト2またはリスト1にドラッグしてみてください。 _dropOnEmpty_オプションを_false_に設定したため、これらのアイテムをドロップすることはできません。

[sortable_methods]#

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

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

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

構文

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

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

Sr.No. Action & Description
1

cancel()

このアクションは、現在のソート操作をキャンセルします。 これは、ソート受信イベントおよびソート停止イベントのハンドラー内で最も役立ちます。 このメソッドは引数を取りません。

アクション-cancel（）

現在のソート操作をキャンセルします。 これは、ソート受信イベントおよびソート停止イベントのハンドラー内で最も役立ちます。 このメソッドは引数を取りません。

構文 

$(".selector").sortable("cancel");
2

destroy()

このアクションにより、ソート機能が完全に削除されます。 これにより、要素は初期化前の状態に戻ります。 このメソッドは引数を取りません。

アクション-destroy（）

このアクションにより、ソート機能が完全に削除されます。 これにより、要素は初期化前の状態に戻ります。 このメソッドは引数を取りません。

構文 

$(".selector").sortable("destroy");
3

disable()

このアクションは、ラップされたセット内のソート可能な要素のソート機能を無効にします。 要素のソート可能性は削除されず、このメソッドの有効なバリアントを呼び出すことで復元できます。 このメソッドは引数を取りません。

アクション-disable（）

このアクションは、ラップされたセット内のソート可能な要素のソート機能を無効にします。 要素のソート可能性は削除されず、このメソッドの有効なバリアントを呼び出すことで復元できます。 このメソッドは引数を取りません。

構文 

$(".selector").sortable("disable");
4

enable()

ソート可能性が無効になっているラップされたセット内のソート可能要素のソート可能性を再度有効にします。 この方法では、ソート不可能な要素にソート機能が追加されないことに注意してください。 このメソッドは引数を取りません。

アクション-enable（）

ソート可能性が無効になっているラップされたセット内のソート可能要素のソート可能性を再度有効にします。 この方法では、ソート不可能な要素にソート機能が追加されないことに注意してください。 このメソッドは引数を取りません。

構文 

$(".selector").sortable("enable");
5

option( optionName )

このアクションは、指定された_optionName_に現在関連付けられている値を取得します。 ここで、_optionName_は取得するオプションの名前です。

アクション-option（optionName）

このアクションは、指定された_optionName_に現在関連付けられている値を取得します。 ここで、_optionName_は取得するオプションの名前です。

構文 

var isDisabled = $( ".selector" ).sortable( "option", "disabled" );
6

option()

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

アクション-option（）

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

構文 

$(".selector").sortable("option");
7

option( optionName, value )

このアクションは、指定された_optionName_に関連付けられたソート可能なオプションの値を設定します。 ここで、_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。

アクション-option（optionName、value）

このアクションは、指定された_optionName_に関連付けられたソート可能なオプションの値を設定します。 ここで、_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。

構文 

$(".selector").sortable("option", "disabled", true);
8

option( options )

ソート可能の1つ以上のオプションを設定します。 _options_は、設定するオプションと値のペアのマップです。

アクション-オプション（オプション）

ソート可能の1つ以上のオプションを設定します。 _options_は、設定するオプションと値のペアのマップです。

構文 

$( ".selector" ).sortable( "option", { disabled: true } );
9

refresh()

このアクションは、必要に応じてアイテムのリストを更新します。 このメソッドは引数を取りません。 このメソッドを呼び出すと、ソート可能に追加された新しいアイテムが認識されます。

アクション-refresh（）

このアクションは、必要に応じてアイテムのリストを更新します。 このメソッドは引数を取りません。 このメソッドを呼び出すと、ソート可能に追加された新しいアイテムが認識されます。

構文 

$(".selector").sortable("refresh");
10

toArray( options )

このメソッドは、ソート可能な要素の_id_値の配列をソート順に返します。 このメソッドは、_Options_をパラメーターとして使用して、シリアル化または並べ替え順序をカスタマイズします。

アクション-toArray（options）

このメソッドは、ソート可能な要素の_id_値の配列をソート順に返します。 このメソッドは、_Options_をパラメーターとして使用して、シリアル化または並べ替え順序をカスタマイズします。

構文 

var sortedIDs = $( ".selector" ).sortable( "toArray" );
11

serialize( options )

このメソッドは、ソート可能から形成されたシリアル化されたクエリ文字列（Ajaxを介して送信可能）を返します。

アクション-serialize（options）

このメソッドは、ソート可能から形成されたシリアル化されたクエリ文字列（Ajaxを介して送信可能）を返します。 デフォルトでは、「setname_number」の形式で各アイテムのIDを調べることで機能し、「setname [] = number＆setname [] = number」のようなハッシュを吐き出します。

構文 

var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );
12

refreshPositions()

このメソッドは、ソート可能なオブジェクトのキャッシュされた情報を更新するために、主に内部的に使用されます。 このメソッドは引数を取りません。

アクション-refreshPositions（）

このメソッドは、ソート可能なオブジェクトのキャッシュされた情報を更新するために、主に内部的に使用されます。 このメソッドは引数を取りません。

構文 

$(".selector").sortable("refreshPositions");
13

widget()

このメソッドは、ソート可能な要素を含むjQueryオブジェクトを返します。 このメソッドは引数を取りません。

アクション-ウィジェット（）

このメソッドは、ソート可能な要素を含むjQueryオブジェクトを返します。 このメソッドは引数を取りません。

構文 

$(".selector").sortable("widget");

例

ここで、上の表のアクションを使用した例を見てみましょう。 次の例は、_toArray（options）_メソッドの使用方法を示しています。 

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</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>
         #sortable-8{ list-style-type: none; margin: 0;
            padding: 0; width: 25%; float:left;}
         #sortable-8 li{ margin: 0 3px 3px 3px; padding: 0.4em;
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>

      <script>
         $(function() {
            $('#sortable-8').sortable({
               update: function(event, ui) {
                  var productOrder = $(this).sortable('toArray').toString();
                  $("#sortable-9").text (productOrder);
               }
            });
         });
      </script>
   </head>

   <body>
      <ul id = "sortable-8">
         <li id = "1" class = "default">Product 1</li>
         <li id = "2" class = "default">Product 2</li>
         <li id = "3" class = "default">Product 3</li>
         <li id = "4" class = "default">Product 4</li>
      </ul>
      <br>
      <h3><span id = "sortable-9"></span></h3>
   </body>
</html>

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

アイテムを並べ替えると、アイテムの順序が下部に表示されます。 ここでは、_ $（this）.sortable（ 'toArray'）。toString（）_を呼び出しています。これは、すべてのアイテムIDの文字列リストを提供し、 1,2,3,4 のようになります。

ソート可能な要素のイベント管理

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

Sr.No. Event Method & Description
1

activate(event, ui)

このイベントは、接続されたソート可能に対してソート操作が開始されると、ソート可能に対してトリガーされます。

イベント-activate（event、ui）

このイベントは、接続されたソート可能に対してソート操作が開始されると、ソート可能に対してトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

  • helper -ソートされるヘルパーを表すjQueryオブジェクト。
  • item -現在のドラッグされた要素を表すjQueryオブジェクト。
  • offset -\ {top、left}として表されるヘルパーの現在の絶対位置。
  • position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。
  • originalPosition -\ {top、left}として表される要素の元の位置。
  • 送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。
  • placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

構文 

$( ".selector" ).sortable({
   activate: function( event, ui ) {}
});
2

beforeStop(event, ui)

このイベントは、ソート操作が終了しようとしているときにトリガーされ、ヘルパーおよびプレースホルダー要素の参照は引き続き有効です。

イベント-beforeStop（event、ui）

このイベントは、ソート操作が終了しようとしているときにトリガーされ、ヘルパーおよびプレースホルダー要素の参照は引き続き有効です。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

  • helper -ソートされるヘルパーを表すjQueryオブジェクト。
  • item -現在のドラッグされた要素を表すjQueryオブジェクト。
  • offset -\ {top、left}として表されるヘルパーの現在の絶対位置。
  • position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。
  • originalPosition -\ {top、left}として表される要素の元の位置。
  • 送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。
  • placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

構文 

$( ".selector" ).sortable({
   beforeStop: function( event, ui ) {}
});
3

change(event, ui)

このイベントは、ソートされた要素がDOM内で位置を変更したときにトリガーされます。

イベント-change（event、ui）

このイベントは、ソートされた要素がDOM内で位置を変更したときにトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

  • helper -ソートされるヘルパーを表すjQueryオブジェクト。
  • item -現在のドラッグされた要素を表すjQueryオブジェクト。
  • offset -\ {top、left}として表されるヘルパーの現在の絶対位置。
  • position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。
  • originalPosition -\ {top、left}として表される要素の元の位置。
  • 送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。
  • placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

構文 

$( ".selector" ).sortable({
   change: function( event, ui ) {}
});
4

create(event, ui)

このイベントは、ソート可能が作成されるとトリガーされます。

イベント-create（event、ui）

このイベントは、ソート可能が作成されるとトリガーされます。 ここで、event_は_Event_型であり、_ui_は_Object_型です。 _UIオブジェクトは空ですが、他のイベントとの一貫性のために含まれています。

構文 

$( ".selector" ).sortable({
   create: function( event, ui ) {}
});
5

deactivate(event, ui)

このイベントは、接続されたソートが停止したときにトリガーされ、接続されたソート可能に伝播されます。

イベント-deactivate（event、ui）

このイベントは、接続されたソートが停止したときにトリガーされ、接続されたソート可能に伝播されます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

  • helper -ソートされるヘルパーを表すjQueryオブジェクト。
  • item -現在のドラッグされた要素を表すjQueryオブジェクト。
  • offset -\ {top、left}として表されるヘルパーの現在の絶対位置。
  • position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。
  • originalPosition -\ {top、left}として表される要素の元の位置。
  • 送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。
  • placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

構文 

$( ".selector" ).sortable({
   deactivate: function( event, ui ) {}
});
6

out(event, ui)

このイベントは、並べ替えアイテムが接続リストから離れたときにトリガーされます。

イベント-out（event、ui）

このイベントは、並べ替えアイテムが接続リストから離れたときにトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

  • helper -ソートされるヘルパーを表すjQueryオブジェクト。
  • item -現在のドラッグされた要素を表すjQueryオブジェクト。
  • offset -\ {top、left}として表されるヘルパーの現在の絶対位置。
  • position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。
  • originalPosition -\ {top、left}として表される要素の元の位置。
  • 送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。
  • placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

構文 

$( ".selector" ).sortable({
   out: function( event, ui ) {}
});
7

over(event, ui)

このイベントは、ソート項目が接続リストに移動したときにトリガーされます。

イベント-over（event、ui）

このイベントは、ソート項目が接続リストに移動したときにトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

  • helper -ソートされるヘルパーを表すjQueryオブジェクト。
  • item -現在のドラッグされた要素を表すjQueryオブジェクト。
  • offset -\ {top、left}として表されるヘルパーの現在の絶対位置。
  • position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。
  • originalPosition -\ {top、left}として表される要素の元の位置。
  • 送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。
  • placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

構文 

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

receive(event, ui)

このイベントは、接続リストが別のリストからソート項目を受信したときにトリガーされます。

イベント-receive（event、ui）

このイベントは、接続リストが別のリストからソート項目を受信したときにトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

  • helper -ソートされるヘルパーを表すjQueryオブジェクト。
  • item -現在のドラッグされた要素を表すjQueryオブジェクト。
  • offset -\ {top、left}として表されるヘルパーの現在の絶対位置。
  • position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。
  • originalPosition -\ {top、left}として表される要素の元の位置。
  • 送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。
  • placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

構文 

$( ".selector" ).sortable({
   receive: function( event, ui ) {}
});
9

remove(event, ui)

このイベントは、ソート項目が接続リストから削除され、別のリストにドラッグされるとトリガーされます。

イベント-remove（event、ui）

このイベントは、ソート項目が接続リストから削除され、別のリストにドラッグされるとトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

  • helper -ソートされるヘルパーを表すjQueryオブジェクト。
  • item -現在のドラッグされた要素を表すjQueryオブジェクト。
  • offset -\ {top、left}として表されるヘルパーの現在の絶対位置。
  • position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。
  • originalPosition -\ {top、left}として表される要素の元の位置。
  • 送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。
  • placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

構文 

$( ".selector" ).sortable({
   remove: function( event, ui ) {}
});
10

sort(event, ui)

このイベントは、ソート操作中にmousemoveイベントに対して繰り返しトリガーされます。

イベント-sort（event、ui）

このイベントは、ソート操作中にmousemoveイベントに対して繰り返しトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

  • helper -ソートされるヘルパーを表すjQueryオブジェクト。
  • item -現在のドラッグされた要素を表すjQueryオブジェクト。
  • offset -\ {top、left}として表されるヘルパーの現在の絶対位置。
  • position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。
  • originalPosition -\ {top、left}として表される要素の元の位置。
  • 送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。
  • placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

構文 

$( ".selector" ).sortable({
   sort: function( event, ui ) {}
});
11

start(event, ui)

このイベントは、ソート操作が開始されるとトリガーされます。

イベント-start（event、ui）

このイベントは、ソート操作が開始されるとトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

  • helper -ソートされるヘルパーを表すjQueryオブジェクト。
  • item -現在のドラッグされた要素を表すjQueryオブジェクト。
  • offset -\ {top、left}として表されるヘルパーの現在の絶対位置。
  • position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。
  • originalPosition -\ {top、left}として表される要素の元の位置。
  • 送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。
  • placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

構文 

$( ".selector" ).sortable({
   start: function( event, ui ) {}
});
12

stop(event, ui)

このイベントは、ソート操作が完了するとトリガーされます。

イベント-停止（イベント、UI）

このイベントは、ソート操作が完了するとトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

  • helper -ソートされるヘルパーを表すjQueryオブジェクト。
  • item -現在のドラッグされた要素を表すjQueryオブジェクト。
  • offset -\ {top、left}として表されるヘルパーの現在の絶対位置。
  • position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。
  • originalPosition -\ {top、left}として表される要素の元の位置。
  • 送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。
  • placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

構文 

$( ".selector" ).sortable({
   stop: function( event, ui ) {}
});
13

update(event, ui)

このイベントは、ソート操作が停止し、アイテムの位置が変更されたときにトリガーされます。

イベント-更新（イベント、UI）

このイベントは、ソート操作が停止し、アイテムの位置が変更されたときにトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

  • helper -ソートされるヘルパーを表すjQueryオブジェクト。
  • item -現在のドラッグされた要素を表すjQueryオブジェクト。
  • offset -\ {top、left}として表されるヘルパーの現在の絶対位置。
  • position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。
  • originalPosition -\ {top、left}として表される要素の元の位置。
  • 送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。
  • placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

構文 

$( ".selector" ).sortable({
   update: function( event, ui ) {}
});

例

次の例は、ドロップ機能中のイベントメソッドの使用方法を示しています。 この例では、receive _、 start_、および_stop_イベントの使用方法を示します。 

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</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>
         #sortable-10, #sortable-11 { list-style-type: none;
            margin: 0; padding: 0; width: 80%; }
         #sortable-10 li, #sortable-11 li { margin: 0 3px 3px 3px;
            padding: 0.4em; padding-left: 1.5em;
            font-size: 17px; height: 16px; }
         .highlight {
            border: 1px solid #000000;
            font-weight: bold;
            font-size: 45px;
            background-color: #cedc98;
         }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .wrap {
            display: table-row-group;
         }
         .wrap1 {
            float:left;
            width: 100px;
         }
      </style>

      <script>
         $(function() {
            $( "#sortable-10" ).sortable({
               start: function (event, ui) {
                  $("span#result")l ($("span#result")l ()
                     + "<b>start</b><br>");
               },
               receive : function (event, ui) {
                  $("span#result")l ($("span#result")l ()
                     + ", receive");
               },
               stop: function (event, ui) {
                  $("span#result")l ($("span#result")l ()
                     + "<b>stop</b><br>");
               }
            });
            $( "#sortable-11" ).sortable({
               connectWith : "#sortable-10, #sortable-11"
            });
         });
      </script>
   </head>

   <body>
      <div class = "wrap">
         <div class = "wrap1">
            <h3>List 1</h3>
            <ul id = "sortable-10">
               <li class = "default">A</li>
               <li class = "default">B</li>
               <li class = "default">C</li>
               <li class = "default">D</li>
            </ul>
         </div>
         <div class = "wrap1">
            <h3>List 2</h3>
            <ul id = "sortable-11">
               <li class = "default">a</li>
               <li class = "default">b</li>
               <li class = "default">c</li>
               <li class = "default">d</li>
            </ul>
         </div>
      </div>
      <hr/>
      <span id = result></span>
   </body>
</html>

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

リスト1のアイテムを並べ替えてみてください。イベントの_start_と_stop_にメッセージが表示されます。 リスト2からリスト1にアイテムをドロップします。ここでも、_receive_イベントでメッセージが表示されます。

「https://www.finddevguides.com/index.php?title=Jqueryui-sortable&oldid=2351」から取得
Powered by MediaWiki