JqueryUI-並べ替え可能

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

構文

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

  • $（selector、context）.sortable（options）メソッド

  • $（selector、context）.sortable（ "action"、[params]）メソッド

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

ソート可能（オプション）メソッドは、HTML要素が交換可能な要素が含まれていることを宣言します。オプションの並べ替えの際に関係する要素の動作を指定したオブジェクトであるパラメータ。

構文

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

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

シニア番号 オプションと説明
1 appendTo

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

Option - appendTo

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

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

  • Selector −これは、ヘルパーを追加する要素を指定するセレクターを示します。

  • jQuery −これは、ヘルパーを追加する要素を含むjQueryオブジェクトを示します。

  • Element −ヘルパーを追加するドキュメントオブジェクトモデル（DOM）の要素。

  • String −文字列「parent」により、ヘルパーはソート可能なアイテムの兄弟になります。

Syntax

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

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

Option - axis

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

Syntax

$(".selector").sortable(
   { axis: "x" }
);
3 キャンセル

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

Option - cancel

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

Syntax

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

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

Option - connectWith

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

Syntax

$(".selector").sortable(
   { connectWith: "#identifier" }
);
5 封じ込め

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

Option - containment

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

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

  • Selector−これはセレクターを示します。要素はセレクターによって表されます（リストの最初の項目のみが考慮されます）

  • Element −コンテナとして使用するDOM要素。

  • String−コンテナとして使用する要素を識別する文字列。可能な値は、親（親要素）、ドキュメント、またはウィンドウ（HTMLページ）です。

Syntax

$(".selector").sortable(
   { containment: "parent" }
);
6 カーソル

要素が移動するときのカーソルCSSプロパティを指定します。マウスポインタの形を表します。デフォルトでは、その値は「auto」です。

Option - cursor

要素が移動するときのカーソルCSSプロパティを指定します。マウスポインタの形を表します。デフォルトでは、その値は「auto」です。可能な値は次のとおりです。

  • 「十字線」（全体）
  • 「デフォルト」（矢印）
  • 「ポインタ」（手）
  • 「移動」（2つの矢印が交差）
  • 「e-resize」（右に展開）
  • 「ne-resize」（右に拡大）
  • 「nw-resize」（左上に展開）
  • 「n-resize」（拡大）
  • 「se-resize」（右下に展開）
  • 「sw-resize」（左下に展開）
  • 「s-resize」（展開）
  • 「自動」（デフォルト）
  • 「w-resize」（左に展開）
  • 「テキスト」（テキストを書くためのポインタ）
  • 「待つ」（砂時計）
  • 「ヘルプ」（ヘルプポインタ）

Syntax

$(".selector").sortable(
   { cursor: "move" }
);
7 cursorAt

マウスカーソルに対するドラッグヘルパーのオフセットを設定します。座標は、1つまたは2つのキーの組み合わせを使用してハッシュとして指定できます：{上、左、右、下}。デフォルトでは、その値は「false」です。

Option - cursorAt

マウスカーソルに対するドラッグヘルパーのオフセットを設定します。座標は、1つまたは2つのキーの組み合わせを使用してハッシュとして指定できます：{上、左、右、下}。デフォルトでは、その値は「false」です。

Syntax

$(".selector").sortable(
   { cursorAt: { left: 5 } }
);
8 ディレイ

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

Option - delay

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

Syntax

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

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

Option - disabled

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

Syntax

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

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

Option - distance

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

Syntax

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

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

Option - dropOnEmpty

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

Syntax

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

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

Option - forceHelperSize

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

Syntax

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

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

Option - forcePlaceholderSize

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

Syntax

$(".selector").sortable(
   { forcePlaceholderSize: true }
);
14 グリッド

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

Option - grid

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

Syntax

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

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

Option - handle

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

Syntax

$(".selector").sortable(
   { handle: ".handle" }
);
16 ヘルパー

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

Option - helper

ヘルパー要素を使用して表示をドラッグできるようにします。デフォルトでは、その値はoriginal。可能な値は次のとおりです。

  • String −「クローン」に設定すると、要素がクローンされ、クローンがドラッグされます。

  • Function −ドラッグ中に使用するDOMElementを返す関数。

Syntax

$(".selector").sortable(
   { helper: "clone" }
);
17 アイテム

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

Option - items

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

Syntax

$(".selector").sortable(
   { items: "> li" }
);
18 不透明度

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

Option - opacity

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

Syntax

$(".selector").sortable(
   { opacity: 0.5 }
);
19 プレースホルダー

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

Option - placeholder

Syntax

$(".selector").sortable(
   { addClasses: false }
);
20 元に戻す

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

Option - revert

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

Syntax

$(".selector").sortable(
   { revert: true }
);
21 スクロール

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

Option - scroll

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

Syntax

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

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

Option - scrollSensitivity

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

Syntax

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

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

Option - scrollSpeed

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

Syntax

$(".selector").sortable(
   { scrollSpeed: 40 }
);
24 許容範囲

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

Option - tolerance

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

  • intersect −アイテムは、他のアイテムと少なくとも50％オーバーラップしています。

  • pointer −マウスポインタが他の項目と重なっています。

Syntax

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

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

Option - zIndex

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

Syntax

$(".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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

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

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

次の例は、3つのオプションの使用法を示しています (a) delay そして (b) distance JqueryUIのソート関数で。

<!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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

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

プレースホルダーの使用

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

<!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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

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

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

次の例は、3つのオプションの使用法を示しています (a) connectWith そして (b) dropOnEmpty JqueryUIのソート関数で。

<!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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

セレクターをconnectWithオプションに渡すことにより、あるList1から別のList1（List2）に、またはその逆にアイテムを並べ替えます。これは、関連するすべてのリストをCSSクラスでグループ化し、そのクラスを並べ替え可能な関数（つまり、connectWith： '＃sortable-5、＃sortable-6'）に渡すことによって行われます。

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

$（selector、context）.sortable（ "action"、[params]）メソッド

ソート（アクション、paramsは）方法は、このようなずれを防止するようにソート可能な要素上のアクションを実行することができます。ザ・action 最初の引数で文字列として指定され、オプションで1つ以上が指定されます params 与えられたアクションに基づいて提供することができます。

基本的に、ここでのアクションは、文字列の形式で使用できるjQueryメソッドに他なりません。

構文

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

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

シニア番号 アクションと説明
1 キャンセル（）

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

Action - cancel()

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

Syntax

$(".selector").sortable("cancel");
2 破壊（）

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

Action - destroy()

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

Syntax

$(".selector").sortable("destroy");
3 disable（）

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

Action - disable()

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

Syntax

$(".selector").sortable("disable");
4 enable（）

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

Action - enable()

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

Syntax

$(".selector").sortable("enable");
5 option（optionName）

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

Action - option( optionName )

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

Syntax

var isDisabled = $( ".selector" ).sortable( "option", "disabled" );
6 オプション（）

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

Action - option()

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

Syntax

$(".selector").sortable("option");
7 option（optionName、value）

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

Action - option( optionName, value )

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

Syntax

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

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

Action - option( options )

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

Syntax

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

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

Action - refresh()

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

Syntax

$(".selector").sortable("refresh");
10 toArray（オプション）

このメソッドは、ソート可能な要素のid値の配列をソートされた順序で返します。このメソッドは、オプションをパラメーターとして受け取り、シリアル化またはソートされた順序をカスタマイズします。

Action - toArray( options )

このメソッドは、ソート可能な要素のid値の配列をソートされた順序で返します。このメソッドは、オプションをパラメーターとして受け取り、シリアル化またはソートされた順序をカスタマイズします。

Syntax

var sortedIDs = $( ".selector" ).sortable( "toArray" );
11 serialize（options）

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

Action - serialize( options )

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

Syntax

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

このメソッドは、ソート可能のキャッシュされた情報を更新するために主に内部的に使用されます。このメソッドは引数を受け入れません。

Action - refreshPositions()

このメソッドは、ソート可能のキャッシュされた情報を更新するために主に内部的に使用されます。このメソッドは引数を受け入れません。

Syntax

$(".selector").sortable("refreshPositions");
13 ウィジェット（）

このメソッドは、並べ替え可能な要素を含むjQueryオブジェクトを返します。このメソッドは引数を受け入れません。

Action - widget()

このメソッドは、並べ替え可能な要素を含むjQueryオブジェクトを返します。このメソッドは引数を受け入れません。

Syntax

$(".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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

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

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

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

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

このイベントは、接続されたソート可能オブジェクトでソート操作が開始されると、ソート可能でトリガーされます。

Event - activate(event, ui)

このイベントは、接続されたソート可能オブジェクトでソート操作が開始されると、ソート可能でトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。

  • helper −ソートされるヘルパーを表すjQueryオブジェクト。

  • item −現在ドラッグされている要素を表すjQueryオブジェクト。

  • offset − {top、left}として表されるヘルパーの現在の絶対位置。

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

  • originalPosition − {top、left}として表される要素の元の位置。

  • sender −あるソート可能オブジェクトから別のソート可能オブジェクトに移動する場合に、アイテムが由来するソート可能オブジェクト。

  • placeholder −プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

Syntax

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

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

Event - beforeStop(event, ui)

このイベントは、ヘルパーとプレースホルダー要素の参照が引き続き有効な状態で、並べ替え操作が終了しようとしているときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。

  • helper −ソートされるヘルパーを表すjQueryオブジェクト。

  • item −現在ドラッグされている要素を表すjQueryオブジェクト。

  • offset − {top、left}として表されるヘルパーの現在の絶対位置。

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

  • originalPosition − {top、left}として表される要素の元の位置。

  • sender −あるソート可能オブジェクトから別のソート可能オブジェクトに移動する場合に、アイテムが由来するソート可能オブジェクト。

  • placeholder −プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

Syntax

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

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

Event - change(event, ui)

このイベントは、並べ替えられた要素がDOM内で位置を変更したときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。

  • helper −ソートされるヘルパーを表すjQueryオブジェクト。

  • item −現在ドラッグされている要素を表すjQueryオブジェクト。

  • offset − {top、left}として表されるヘルパーの現在の絶対位置。

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

  • originalPosition − {top、left}として表される要素の元の位置。

  • sender −あるソート可能オブジェクトから別のソート可能オブジェクトに移動する場合に、アイテムが由来するソート可能オブジェクト。

  • placeholder −プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

Syntax

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

このイベントは、ソート可能オブジェクトが作成されたときにトリガーされます。

Event - create(event, ui)

このイベントは、ソート可能オブジェクトが作成されたときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiオブジェクトは空ですが、他のイベントとの一貫性を保つために含まれています。

Syntax

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

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

Event - deactivate(event, ui)

このイベントは、接続されたソートが停止したときにトリガーされ、接続されたソート可能オブジェクトに伝搬されます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。

  • helper −ソートされるヘルパーを表すjQueryオブジェクト。

  • item −現在ドラッグされている要素を表すjQueryオブジェクト。

  • offset − {top、left}として表されるヘルパーの現在の絶対位置。

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

  • originalPosition − {top、left}として表される要素の元の位置。

  • sender −あるソート可能オブジェクトから別のソート可能オブジェクトに移動する場合に、アイテムが由来するソート可能オブジェクト。

  • placeholder −プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

Syntax

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

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

Event - out(event, ui)

このイベントは、ソート項目が接続リストから移動したときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。

  • helper −ソートされるヘルパーを表すjQueryオブジェクト。

  • item −現在ドラッグされている要素を表すjQueryオブジェクト。

  • offset − {top、left}として表されるヘルパーの現在の絶対位置。

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

  • originalPosition − {top、left}として表される要素の元の位置。

  • sender −あるソート可能オブジェクトから別のソート可能オブジェクトに移動する場合に、アイテムが由来するソート可能オブジェクト。

  • placeholder −プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

Syntax

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

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

Event - over(event, ui)

このイベントは、並べ替えアイテムが接続リストに移動したときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。

  • helper −ソートされるヘルパーを表すjQueryオブジェクト。

  • item −現在ドラッグされている要素を表すjQueryオブジェクト。

  • offset − {top、left}として表されるヘルパーの現在の絶対位置。

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

  • originalPosition − {top、left}として表される要素の元の位置。

  • sender −あるソート可能オブジェクトから別のソート可能オブジェクトに移動する場合に、アイテムが由来するソート可能オブジェクト。

  • placeholder −プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

Syntax

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

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

Event - receive(event, ui)

このイベントは、接続されたリストが別のリストから並べ替えアイテムを受信したときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。

  • helper −ソートされるヘルパーを表すjQueryオブジェクト。

  • item −現在ドラッグされている要素を表すjQueryオブジェクト。

  • offset − {top、left}として表されるヘルパーの現在の絶対位置。

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

  • originalPosition − {top、left}として表される要素の元の位置。

  • sender −あるソート可能オブジェクトから別のソート可能オブジェクトに移動する場合に、アイテムが由来するソート可能オブジェクト。

  • placeholder −プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

Syntax

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

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

Event - remove(event, ui)

このイベントは、並べ替えアイテムが接続リストから削除され、別のリストにドラッグされたときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。

  • helper −ソートされるヘルパーを表すjQueryオブジェクト。

  • item −現在ドラッグされている要素を表すjQueryオブジェクト。

  • offset − {top、left}として表されるヘルパーの現在の絶対位置。

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

  • originalPosition − {top、left}として表される要素の元の位置。

  • sender −あるソート可能オブジェクトから別のソート可能オブジェクトに移動する場合に、アイテムが由来するソート可能オブジェクト。

  • placeholder −プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

Syntax

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

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

Event - sort(event, ui)

このイベントは、ソート操作中にmousemoveイベントに対して繰り返しトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。

  • helper −ソートされるヘルパーを表すjQueryオブジェクト。

  • item −現在ドラッグされている要素を表すjQueryオブジェクト。

  • offset − {top、left}として表されるヘルパーの現在の絶対位置。

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

  • originalPosition − {top、left}として表される要素の元の位置。

  • sender −あるソート可能オブジェクトから別のソート可能オブジェクトに移動する場合に、アイテムが由来するソート可能オブジェクト。

  • placeholder −プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

Syntax

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

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

Event - start(event, ui)

このイベントは、ソート操作が開始されたときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。

  • helper −ソートされるヘルパーを表すjQueryオブジェクト。

  • item −現在ドラッグされている要素を表すjQueryオブジェクト。

  • offset − {top、left}として表されるヘルパーの現在の絶対位置。

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

  • originalPosition − {top、left}として表される要素の元の位置。

  • sender −あるソート可能オブジェクトから別のソート可能オブジェクトに移動する場合に、アイテムが由来するソート可能オブジェクト。

  • placeholder −プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

Syntax

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

このイベントは、ソート操作が終了したときにトリガーされます。

Event - stop(event, ui)

このイベントは、ソート操作が終了したときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。

  • helper −ソートされるヘルパーを表すjQueryオブジェクト。

  • item −現在ドラッグされている要素を表すjQueryオブジェクト。

  • offset − {top、left}として表されるヘルパーの現在の絶対位置。

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

  • originalPosition − {top、left}として表される要素の元の位置。

  • sender −あるソート可能オブジェクトから別のソート可能オブジェクトに移動する場合に、アイテムが由来するソート可能オブジェクト。

  • placeholder −プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

Syntax

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

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

Event - update(event, ui)

このイベントは、並べ替え操作が停止し、アイテムの位置が変更されたときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。

  • helper −ソートされるヘルパーを表すjQueryオブジェクト。

  • item −現在ドラッグされている要素を表すjQueryオブジェクト。

  • offset − {top、left}として表されるヘルパーの現在の絶対位置。

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

  • originalPosition − {top、left}として表される要素の元の位置。

  • sender −あるソート可能オブジェクトから別のソート可能オブジェクトに移動する場合に、アイテムが由来するソート可能オブジェクト。

  • placeholder −プレースホルダーとして使用されている要素を表すjQueryオブジェクト。

Syntax

$( ".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").html ($("span#result").html () 
                     + "<b>start</b><br>");
               },
               receive : function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + ", receive");
               },
               stop: function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + "<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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

リスト1の項目を並べ替えてみると、イベントの開始時と終了時にメッセージが表示されます。ここで、アイテムをリスト2からリスト1にドロップします。ここでも、受信イベントにメッセージが表示されます。

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