Draggable / ドラッグ移動

要素をドラッグで移動できるようにしたい場合には、jQuery UI の Draggable が便利だ。

• jQuery UI の Draggable プラグインによるドラッグ移動可能ボックス

  jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックス。ドラッグして、上下左右に移動させることができる。オプションも豊富だ。

• 水平方向（左右）だけ、ドラッグで移動できるボックス

  jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックス。水平方向だけ移動できるようにするには、axis オプションに、x を指定する。

• 垂直方向（上下）だけ、ドラッグで移動できるボックス

  jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックス。垂直方向（上下）だけ移動できるようにするには、axis オプションに、y を指定する。

• グリッド（格子）に沿って、ドラッグで移動できるボックス

  jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックス。グリッド（格子）に沿って移動できるようにするには、grid オプションを使う。grid オプションで指定した大きさのグリッド（格子）にスナップ（吸着）させることができる。

• 特定要素内だけ、ドラッグで移動できるボックス

  jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックスの、移動範囲を設定する方法。親要素内だけ移動できるようにするには、containment オプションに、parent を指定。「#jquery-ui-draggable-wrap」のように特定の要素の id 指定もできる。

• ドラッグ移動できるボックスを、特定要素にスナップさせる

  jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックス。特定の要素にスナップ（吸着）させたいときは、snap オプションを使う。

• ドラッグ移動できるボックスの特定要素へのスナップの内外指定

  jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックス。特定の要素にスナップ（吸着）させたいときは、snap オプションを使う。同時に、snapMode オプションを使うと、内側だけにスナップ、外側だけにスナップ、内外両方にスナップを、指定できる。

• ドラッグ移動できるボックスの特定要素へのスナップ距離を指定

  jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックス。特定の要素にスナップ（吸着）させたいときは、snap オプションを使う。同時に、snapTolerance オプションを使うと、スナップする距離を指定できる。

• ドラッグ移動できるボックスにおいて、ドラッグできる要素を指定

  jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックスにおいて、ドラッグできる要素を指定する方法。ドラッグできる要素を指定するには、handle オプションを使う。

• ドラッグを放すと元の位置に戻るドラッグ移動ボックス

  jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックスにおいて、ドラッグを放すと元の位置に戻るようにする方法。ドラッグを放すと元の位置に戻るようにするには、revert オプションに、true を指定する。

• ドラッグ移動ボックスにおいて、移動用クローンを出現させる

  jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックスにおいて、移動用クローン（複製）を出現させる方法。クローンを出現させるには、helper オプションに、clone を指定する。

• ドラッグ移動ボックスにおいて、移動中のボックスを半透明にする

  jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックスにおいて、移動中のボックスを半透明にする方法。移動中のボックスを半透明にするには、opacity オプションを使う。

• ドラッグ移動ボックスにおける、移動中のスクロール可否設定

  jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックスにおける、ボックス移動中のスクロール可否設定。ウィンドウや親要素を、スクロールさせたくない場合、scroll オプションに false を指定。スクロールさせたい場合、scroll オプションに true を指定。

• ドラッグ＆ドロップで新たな項目を並び替えられるリストへ追加

  jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックスと、jQuery UI の Sortable プラグインを使った、並び替えられるリストとの併用。併用することにより、ドラッグ＆ドロップで、新たな項目を、並び替えられるリストへ、追加できる。