Jquery可拖拽內外遏制

Question

而不是圍繞它的可拖動元素的遏制，我怎麼能在裏面呢？所以你可以在任何地方拖動這個元素，只要它的邊緣不與它內部的元素碰撞？

Answer 1

一種方法是使用drag事件並更新ui.position或ui.offset字段，以手動約束該項目。

Here是一個jsfiddle來說明這個概念，雖然這並沒有完全實現你所描述的。

Answer 2

您可以通過製作一個真實的包含組件來限制您的可拖動元素，就像它被較小的元素所約束一樣。你只需要做出真正的容器的尺寸是這樣的：

Container.height = (Draggable.height - Restrict.height) + Draggable.height 
Container.width = (Draggable.width - Restrict.width) + Draggable.width 

然後，你還需要對付拖拉動作，使得包含限制元素似乎不動當可拖動元素移動時。無論是那個還是那個不動的部分都可以是一個浮動的div。

Answer 3

如果其他人對此感興趣，請使用Rusty的代碼和邏輯here's a JSfiddle link。

Answer 4

建立在@ RustyTheBoyRobot的答案，你也可以在CSS中完成，如果你已經知道你的可拖動的尺寸。

活生生的例子 - jsbin.com/agovex

這樣做的明顯缺點是，如果你想在它不會工作，因爲其值在CSS硬編碼多種情況重用此。但是如果你只需要一個具有已知尺寸的東西，我就會發現CSS只有簡單和優雅。只有一行JavaScript來創建可拖動。