可调整大小的可拖动图像到达位置：调整大小时绝对答案

【问题标题】：Resizable draggable image goes to position:absolute when resized可调整大小的可拖动图像到达位置：调整大小时绝对
【发布时间】：2013-07-28 20:15:34
【问题描述】：

我在这个 jsfiddle 中有一个图像 - http://jsfiddle.net/stevea/5S5NW/4/ - 我已经调整大小，然后我通过将 draggable() 应用到可调整大小的图像周围的 ui-wrapper 使其可拖动：

$(function(){       
    $('img#pelican').resizable({aspectRatio : true});
    $('img#pelican').closest('.ui-wrapper').draggable();
});

在 resizable() 和 draggable() 首次应用后，ui-wrapper 具有 position:relative 样式，正如您在 Firebug 中看到的那样。当您拖动图像时，这仍然存在。但是，一旦您开始调整图像大小，ui-wrapper 样式就会更改为 position:absolute。为什么会这样？

如果我通过按钮强制将位置恢复为相对位置，只要我再次调整它的大小，它就会立即恢复为绝对位置。如果我省略了 draggable() 行，所以图像可以调整大小，它可以正常工作，即在调整大小后保持位置：相对。

有人知道这里发生了什么吗？如何创建一个可调整大小、可拖动的图像并保持位置：相对？

谢谢

【问题讨论】：

标签： jquery-ui

【解决方案1】：

我更新了小提琴：http://jsfiddle.net/5S5NW/5/

您可以在此文档中找到 resize 事件：http://api.jqueryui.com/resizable/#event-resize

我所做的很简单。在调整大小时，我将 css 添加到 css 属性相对位置：

resize: function(){
  $(this).css('position', 'relative');
}

请记住，jquery 将其位置设置为绝对位置是有原因的。如果一切正常，请检查浏览器和必要的功能。

【讨论】：