带有边框的Div在Dragend上调整大小

Question

我有一个带有几个可拖动和可调整大小的块的容器。 因为我希望能够向用户显示哪个块处于“活动” active ，所以我向其添加了active类并添加了边框。

现在的问题是，当我将块拖放到容器中几次时，div越来越大。 当然哪一个是不实际的。

当我从active类中删除样式时，不会发生这种情况，因此这与要添加的边框有关。 选择一个块后，该类将从所有块中删除。

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

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

只需拖动其中一个块几次。 有人可以向我解释为什么会这样以及如何解决吗？

Answer 1

不要在放下设置width和height ：

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 + '%');
  }

更新小提琴

众所周知，您还有另一个问题，如果您调整块的大小， width和height也会改变。 您可能需要使用resizable的start()函数保存块的初始width和height ，然后将这些大小与stop()函数中的结束大小进行比较，并仅更新width或height 。

（当然，除非调整大小是预期的行为）

Answer 2

正如@Titus指出的那样，问题是height和width在放置border的width的地方被错误地计算了。

由于必须为此项目的这些元素设置width和height ，这一点很重要，因此我使用jQuery的innerWidth()和innerHeight()函数来计算没有边框的元素的width和height 。

由于存在边界，因此我还需要在计算中删除该数字。 下面的代码解决了我的问题。

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.innerWidth() - obj.css('borderWidth')) / $container.width()) * 100 + '%');
    obj.height(((obj.innerHeight() - obj.css('borderWidth')) / $container.height()) * 100 + '%');
}