javascript - 带边框的 Div 在 dragend 上调整大小

Question

我有一个容器，其中包含几个可拖动且可调整大小的 block 。因为我希望能够向用户显示哪个 block 是“事件的”，所以我向其添加了 active 类，它添加了一个边框。

现在的问题是，当我将 block 拖放到容器中几次时，div 变得越来越大。这当然不是很实用。

当我从 active 类中删除样式时，这不会发生，所以这与添加的边框有关。选择 block 时，此类将从所有 block 中删除。

请注意，必须为此元素设置 width 和 height，这一点很重要。

我创建了一个小演示并添加了一个显示问题的 Fiddle。 Fiddle

只需拖动其中一个方 block 几次。有人可以向我解释为什么会发生这种情况以及如何解决吗？

Answer 1

不要在放置时设置宽度和高度:

function setDimensions(obj) {

    obj.css('position', 'absolute');
    obj.css("left",parseInt(obj.css("left")) / ($container.width() / 100)+"%");
    obj.css("top",parseInt(obj.css("top")) / ($container.height() / 100)+"%");  
    //obj.width((obj.width() / $container.width()) * 100 + '%');
    //obj.height((obj.height() / $container.height()) * 100 + '%');
  }

Updated Fiddle

如你所知，你还有另一个问题，如果你调整一个 block 的大小，width 和 height 也会改变。您可能希望使用 resizable 的 start() 保存 block 的初始 width 和 height函数，然后将这些尺寸与 stop() 函数中的最终尺寸进行比较，并且仅更新 width 或 height。

(当然，除非调整大小是预期的行为)