4

我在这个 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() 行，所以图像只是可调整大小，它可以正常工作，即在调整大小后保持位置：相对。

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

谢谢

4

1 回答 1

0

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

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

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

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

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

于 2015-03-19T12:25:10.320 回答