Jquery可拖动的由内到外的收容

Question

而不是围绕它的可拖动元素的包含，我怎么能把它包含在里面呢？所以你可以把元素拖到任何地方，只要它的边缘不与它里面的元素碰撞？

Answer 1

你可以通过制作一个包含限制你的可拖动元素的实际包含组件来假装它，好像它受较小元素的约束一样。你只需要像这样制作真实容器的尺寸：

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

然后，您还需要对抗拖动动作，以便在可拖动元素移动时所包含的限制元素似乎不会移动。无论是那个还是不动的部分都可以是浮动的div。

Answer 2

一种方法是使用drag事件并更新ui.position或ui.offset字段，以手动约束项目。

Here是一个用来说明这个概念的方法，虽然这并没有完全实现你所描述的内容。

Answer 3

如果其他人对此感兴趣，请使用Rusty的代码和逻辑here's a JSfiddle link。

Answer 4

在@ RustyTheBoyRobot的答案的基础上，如果您已了解可拖动的维度，您也可以单独使用CSS。

直播示例 - jsbin.com/agovex

明显的缺点是，如果你想在多种情况下重用它，它就不会起作用，因为这些值在CSS中是硬编码的。但是，如果你只需要一个已知尺寸的东西，我发现CSS只是简单而优雅的方法。只有一行JavaScript可以创建可拖动的。