jquery可拖动和可调整大小的遏制

Question

我试图使一个div重新调整大小和draquable与jquery.然而,实施似乎是非常错误的.

我发现了几个类似的问题,但没有解决方案.

• 在jQuery中,如何在同时使用resizable()和draggable()时修复包含错误？
• 在拖动时调整JQuery Draggable元素的包含父级的大小

我尝试使用几种position配置,并尝试了refreshPositions 选项,没有任何效果.

我遇到的错误:

• 当快速移动子项目时(特别是在圆圈中移动时),它经常会断开并且不受限制.
• 当将孩子移动到右下角时,然后尝试通过反复拖动将孩子拖出角落,在每次迭代中,孩子会进一步打破收容
• 当收容被打破时,在下一次拖动时,您也可以拖入这个破碎的收容区域

我已经最小化了这个例子.
这在所有浏览器中都是可重现的,尽管这些小提琴似乎在IE 10和Opera中都有所突破.

$(".child")
    .draggable({
    containment: "parent",
    cursor: "move"
}).resizable({
    handles: "s,e",
    containment: "parent",
    minHeight: 50,
    minWidth: 50
});

请参阅此处以获取完整而简单的示例.

http://jsfiddle.net/jxY8M/

我怎么能解决这个遏制问题？

Answer 1

这是UI可拖动本身的问题,这里已经报道了这个问题

您的案例中的修复程序(至少在我正在使用的Chrome的最新版本中)

1. padding在父节点上添加一个5px ,在这里找到演示
2. border在父节点上添加一个5px ,在这里找到演示
3. margin在孩子身上添加一个5px ,这里有demo
4. 混合上述任何一种,增加5px
5. 添加overflow:hidden到父级,在此处找到演示.我不知道为什么这个有效,但似乎完美地完成了这项工作

5px阈值可能仅与示例相关,为了在您的实际情况下获得正确的值,可能需要一些播放.我看到的其他一些例子需要更少的填充或边框宽度,我想它是基于元素有多大,但我不确定.我在他们的例子中测试了第五个解决方案,它似乎也在那里工作