sortable()

投稿日:2022-12-29 投稿者:PS カテゴリ:その他タグ: jQuery, Widgets

Drag & Drop で要素を入れ替える。

$('table.sortbale tbody').sortable({
  tolerance : "pointer",                // カーソルが入った場合に placeholder（移動先マーカー） を移動
  opacity : 0.7,                        // helper（掴んだ要素）の透明度
  axis : "y",                           // 縦方向にのみ移動可能
  placeholder : "drop-line"             // placeholder の class名
});

table.sortable > tbody {
  > tr.drop-line > td { background-color: #A4CEA4;}
  > tr.ui-sortable-handle {
    > td.move { cursor: url(images/ps-move.cur), auto;}
    &.ui-sortable-helper {
      margin-left: 10px;
      > td { background-color: #FFF;}
    }
  }
}

オプション

オプション	初期値	説明
disabled	false	並べ替え機能を禁止するかどうか。 true：無効 false：有効
appendTo	“parent”	helper（掴んでいる要素）のコンテナとして使用する要素。
axis	false	ドラッグできる方向。 “x”：横方向 “y”：縦方向 false：制限なし
cancel	“:input,button”	掴ませたくない要素を指定します。
connectWith	false	他の Sortable 要素に、 Sortable アイテムを移動できるようにする。
containment	false	ドラッグの範囲を指定。 “parent”：親要素内 “document”：ドキュメント内 (DOM要素)：
cursor	“auto”	ドラッグ中のカーソルを指定。 CSSの cursor プロパティの値が指定できます。
cursorAt	false	ドラッグ中のカーソルの位置を指定。 top, left, right, bottomを、ハッシュで指定する。
delay	0	並び替えを開始するまでの時間（ミリ秒）。
distance	1	指定されたpixelを超えたところまで引きずらないと、並び替えが開始されないようにする。
dropOnEmpty	true	要素の内容が空の場合でも移動可能にするか。
forceHelperSize	false	helper（掴んでいる要素）のサイズを強制的に保持するか。
forcePlaceholderSize	false	placeholder（移動先）のサイズを強制的に保持するか。
grid	false	スナップするサイズの指定。例：`[0,30]`　縦方向30px毎にスナップする。
handle	false	指定した要素をクリックして並び替えを開始するか。
helper	“original”	helperの表示方法。 “clone”：要素を複製（ghostingエフェクトが適用されます） “original”：ドラッグ要素をマウスカーソルに合わせて動かす。
items	“> *”	Sortable アイテムを指定。
opacity	false	ドラッグ中の不透明度。
placeholder	false	placeholder（移動先）に適用する CSS クラス名を指定。
revert	false	掴んだ要素を離した時、目的の位置までのアニメーションを指定。数値を指定した場合、アニメーション時間(ms)。
scroll	true	並び替え中に表示領域を出た場合、ウィンドウを自動的にスクロールするかどうか。
scrollSensitivity	20	スクロールを開始する表示領域の端からの距離(px)。
scrollSpeed	20	scrollSensitivityオプションで指定した距離に入った時の、スクロール速度を指定。
tolerance	“intersect”	並び替えが起きる条件を指定します。 “`intersect`“：要素が半分以上入った場合 “`pointer"`：ポインタが入った
zIndex	1000	Sortable 要素の重ね合わせの順序を数値で指定。数値が大きいほど、手前に表示されます。