移動可能なjqueryボックスをページ外に移動しないでください

Question

私はいくつかのデザインを微調整する必要があるWebアプリケーションを作成しています。 http://jsfiddle.net/rkumarnirmal/FSDPH/

ここに示されている黒い移動可能なボックスはページから移動してはいけませんが（少しでもそうではありません）、そこにチェックを入れると、ボックスを移動して幾分外に出すことができますページ。どうすればそれを制御できますか？

さらにもう1つ、jPickerツールhttp://www.digitalmagicpro.com/jPicker/をそのボックスに実装します。カラーボックスをクリックすると、jPickerツールがポップアウトされ、ボックスが移動された場合、jPickerツールはページに従って配置する必要があります。

これは公平ではないように私は質問を知っているが、私はチャンスを持っていない:(誰も私を案内してもらえますか？

は感謝！

Answer 1

あなたはドラッグ可能な要素を内部に保持するためにdraggableにcontainmentプロパティを使用することができますその親の1

例：コード全体をやっ

$("#box_bg").draggable({scroll: false, cancel: "div#box", containment: 'document'}); 

Answer 2

は現在可能ではない私はGIVです。あなたに論理を伝えてください。あなたは簡単にそれを行うことができます。

オーバーレイのドラッグイベントを追跡する必要があります。イベントハンドラでは、オーバーレイの左上の位置を確認する必要があります。あなたの限界を超えた場合は、左/上を0（またはいくらかのオフセット）に設定します。

極端な右（または下）を超えている場合は、ウィンドウの幅（または高さ）からオーバーレイの幅（または高さ）を引いた値を設定する必要があります。

カラーピッカーと同じです。しかし、ドラッグイベントの代わりに、カラーピッカーが表示されたときに再配置を実行する必要があります。