JQuery 可拖动和可调整大小的图像答案

【问题标题】：JQuery draggable and resizable imagesJQuery 可拖动和可调整大小的图像
【发布时间】：2011-05-02 12:26:43
【问题描述】：

我在尝试让一些基本的 jquery 功能正常工作时遇到了一些问题。

我只是希望能够将一个图像（或多个图像）拖到一个容器中，然后调整它们的大小。

到目前为止我有这个

我遇到的具体问题是：

1) 无法在图像边缘显示调整大小句柄

2) 一旦您单击图像，它就会直接“跳转”到包含 div (#droppable) - 您看不到任何平滑的拖动动画，它只是直接跳转到 div。我希望实际上必须将图像“拖动”到 contasiment div 中，而不是在您单击图像后立即自动跳入。

任何想法我做错了什么？

【问题讨论】：

哪个浏览器？我在 chrome 中测试过，它似乎工作正常。
Firefox 4 - 图片可以br拖入容器div，但使用firefox时直接跳进去
另外 - 我刚刚在 chrome 中进行了测试，它的功能与我上面所说的完全一样。将图像放置在包含 div 中时，图像周围没有调整大小的句柄，并且只要您单击图像，它就会直接跳到包含 div 中 - 没有平滑的拖动动画......？

【解决方案1】：

containment 选项“将拖动限制在指定元素或区域的范围内。”

如果您希望图像在放置区域内部和外部都可拖动，那么您需要指定一个比可放置 div 更大的容器。

看resizable的代码，只有右下角添加可见句柄的代码：

if ('se' == handle) {
        axis.addClass('ui-icon ui-icon-gripsmall-diagonal-se');
                };

因此，目前似乎不支持开箱即用的可见句柄，您可能需要自己添加该功能。

【讨论】：

但是 - 我希望图像只有在被删除后才能在容器 div 内移动。所以 - 为了能够顺利地将图像拖到 div 中 - 一旦它们在那里，它们只能在该 div 内移动。我尝试将所有内容包装在另一个“可放置”的 div 中，但随后它允许我将图像放入较小的包含 div 后将它们拖回......如果这有意义吗？
在初始化您的可拖动对象时，您可以设置revert:"invalid"，因此如果您将图像拖动到其他任何位置，它会弹回其起始位置。如果您不希望用户将其拖回，请在 droppables 放置事件中设置 containment：drop: function(event,ui){ ui.draggable.draggable("option", "containment", "#droppable"); }
干杯 DarthJDG - 完成了，关于调整大小手柄没有显示的任何想法？？
@user734421 - 我编辑了答案以包含有关调整大小句柄的信息