可拖动和可调整大小图像上的 JQuery UI 问题答案

【问题标题】：JQuery UI problems on Draggable and Resizable images可拖动和可调整大小图像上的 JQuery UI 问题
【发布时间】：2012-02-14 23:56:51
【问题描述】：

在试图解决我目前在网页上遇到的问题时，我真的很头疼，希望您能帮帮我：D。我已经深入研究了一个相关主题，但使用多张图片，我没有找到任何有相同问题的人。

我想要实现的目标： “我想在 div 中包含可拖动和可调整大小的图像”。单击链接时会逐一添加图像。

我主要有3个问题（也用图片解释）：

当我添加一个新项目并将其标记为可调整大小时，它会显示在最后一张图片的下方，而不是旁边。（当它也没有标记为可调整大小时，它会出现在旁边） http://i.stack.imgur.com/1dBXF.jpg
当我拖动图像，改变他的 Y 轴，然后尝试调整它的大小时，它会自动移动到 las Y 轴位置（X 是一致的）。 http://i.stack.imgur.com/rF9KK.jpg
当我拖动一张图像并尝试调整另一张图像的大小后，拖动图像的 Y 位置会发生变化。 h**p://i.stack.imgur.com/OMWEr.jpg

我不知道该怎么办，非常感谢。

【问题讨论】：

标签： javascript image jquery-ui jquery-ui-draggable jquery-ui-resizable

【解决方案1】：

我尝试重新创建您想要实现的目标并到达此sample
我希望它在某种程度上有所帮助。

以下是我对您遇到的问题的解决方案：
问题 1：
我通过将可调整大小和不可调整大小的图像分配到单独的 div 中来实现它们的分离。（这样似乎更容易：P）。

问题 2 和问题 3：
我没有遇到这两个问题，你是使用 alsoResize 还是 grid 选项？

[更新帖子]
我看到您遇到的问题并修改了我的初始代码，这里是result。
我在更新的行上提供了 cmets。

您遇到的调整大小问题是因为 img 元素没有绝对定位在页面中。

我希望这对您有所帮助:)

【讨论】：

问题1和2解决了！！！非常感谢，我也尝试过使用 div 包装器，但我忘了设置：“display: inline-block;”非常感谢，真的。
关于问题3，在您提供的示例中也有，当您设置2张可调整大小和可拖动的图像时，如果您调整第1张图像的大小（增加高度），则将第二张拖到div 的顶部并再次调整第一个图像的大小（降低高度）第二个图像上升。