移動jquery框不應該移出頁面

Question

我正在創建一個web應用程序，我需要做一些設計調整。下面是示例功能代碼：http://jsfiddle.net/rkumarnirmal/FSDPH/

在那裏顯示的黑色移動框不應該移出頁面（甚至沒有），但是如果您在那裏檢查，您可以移動框並將其放在某處這一頁。我如何控制它？

還有一件事，我要在該框中實現jPicker工具http://www.digitalmagicpro.com/jPicker/。如果我們單擊顏色框，jPicker工具將被彈出，然後如果該框被移動，jPicker工具必須根據頁面進行自己的排列。

我知道問問題，這樣是不公平的，但我沒有機會:(誰能明白呢

謝謝！

Answer 1

您可以使用draggable的containment財產，以保持可拖動的元素中其父母之一

例如：。

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

Answer 2

否則整個代碼，現在是不可能的，我GIV你的邏輯。你可以輕鬆地做到這一點。

你必須跟蹤覆蓋的拖動事件。然後在事件處理程序中，您必須檢查疊加層的左側和頂部位置。如果超出了你的限制，那麼將left/top設置爲0（或者一些偏移量）。

另一方面，如果超出最右端（或底部），則必須相應地將窗口的寬度（或高度）減去覆蓋層的寬度（或高度）。

顏色選擇器也一樣。但不是拖動事件，您必須在顯示顏色選擇器時執行重新定位。