克隆和调整div的大小相对于其内容

Question

首先我想说 - 我不想让别人去做我的编码。我只是在寻找提示/指针/建议。

背景：

我使用jQuery和jQueryUI的拖/放

1. 我有尺寸500像素X 500像素可投放股利。这是#div-droppable。

2. 我有相同的尺寸#div-droppable可拖动DIV。我们称之为#div-draggable。

3. 从#div-draggable有很多可拖动的产品，可拖动到#div-droppable。

4. 每个产品在#div-draggable具有尺寸50像素50像素X。

实施例： 我已拖50个产品从#div-draggable到#div-droppable，现在它们是绝对定位在#div-droppable内。

现在我想在#div-droppable内容保存到第三DIV叫#div-draft。 #div-draft的尺寸为250px * 250px。我希望位于#div-droppable的产品与#div-draft相关。

我的想法：

如果一个拖产品是绝对定位与左边的#div-droppable内：50像素和顶部：100px的，在#div-draft同样的产品将定位与左：25px的和顶部：50px的（因为#div-draft是#div-droppable的一半大小）。同样，每个产品的尺寸将是一半大小（25像素* 25像素）

我可以做一些计算在#div-droppable（如上所述）的所有产品，并把每一个产品在#div-draft

我的问题： 有没有其他的方式/更聪明的方式/更好的方式来做到这一点？我基本上希望克隆某个div（#div-droppable）内容到另一个div（#div-draft），但我希望内容的大小相对于#div-draft的大小。

Answer 1

你将如何做到这一点，当然，取决于内容，但我假设你不使用的图像。如果你这样做很简单，只需使用CSS来改变图像的大小。除非使用jQuery的.css()方法创建函数，否则无法克隆一组内容。您将不得不重新计算CSS或jQuery中的所有内容。

参见： http://api.jquery.com/css/