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

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

実装例（サンプル）

実装例について

実装例（サンプル）は、containment オプションに、parent を指定し、親要素内だけでしか移動できないようにし、スクロールできない移動ボックスとスクロールできる移動ボックスを並べた。

実装例の動作について

• 「scroll: false」と書いてあるボックスを、ドラッグして、移動させ、破線で示した親要素の枠に近付けてスクロールしようとしてもスクロールしない。
• 「scroll: true」と書いてあるボックスを、ドラッグして、移動させ、破線で示した親要素の枠に近付けてスクロールしようとすると、どこまでもスクロールする。

実装例のソースコード

読み込み

読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。

まとめて読み込む場合

個別に読み込む場合

JavaScript

CSS

HTML