javascript - jQuery可拖动的内向外包含

Question

而不是在它周围包含可拖动元素，我怎么能把它放在里面？因此，只要元素的边缘不与其中的元素碰撞，您就可以将元素拖动到任何地方？在此处输入图像描述

score 2 · Accepted Answer

您可以通过制作一个真正的包含组件来伪造它，该组件限制您的可拖动元素，就好像它受到较小元素的约束一样。您只需要像这样制作真实容器的尺寸：

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

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

score 2 · Accepted Answer

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

这是一个 jsfiddle 来说明这个概念，尽管这并没有完全实现你所描述的。

score 0 · Accepted Answer

0

如果其他人对此感兴趣，使用 Rusty 的代码和逻辑这里是一个 JSfiddle 链接。

于 2012-05-23T21:40:15.263 回答

score 0 · Accepted Answer

在@RustyTheBoyRobot 的回答的基础上，如果您知道可拖动的尺寸，您也可以仅在 CSS 中完成。

现场示例- jsbin.com/agovex

这样做的明显缺点是，如果您想在多种情况下重用它，它将无法工作，因为这些值在 CSS 中是硬编码的。但是，如果您只需要它用于已知尺寸的一件事，我发现 CSS 唯一的方法简单而优雅。只需一行 JavaScript 即可创建可拖动对象。

4 回答 4