Question

我有容器，它是可重复大小的并且包含内部元素<div>，可以按任何顺序放置，当它们的数量上升时，我可以将它们添加到容器中，变得更小。我的目标是当内部div height或width变得小于100px然后自动重新调整容器大小。

可以有多个小于100px的元素。当容器重新调整大小时，所有元素都会根据width的百分比变大。

问题：当有多个小元素时，它们会向容器发送许多事件，我想向容器发送一个请求以重新调整大小，如果有可能足以使所有元素足够大。

我尝试watch宽度，但它会发送给很多请求。

             scope.$watch(function () {
                return element.width();
            }, function (oldval, newval) {
                clearTimeout(containerCtrl.resizedFinished);
                containerCtrl.resizedFinished = setTimeout(function () {
                    console.log("New Value=" + newval);
                    if (newval < 100)
                        scope.resizeContainer(element.width());
                }, 100);
            });

也许有人可以给我任何建议？我使用Angular，jquery基础模块，js。

Answer 1

我认为你试图实现：

可拖动组件应至少为100px宽
将组件拖放到容器中时，所有组件都应缩小，以便它们适合容器
当组件无法变小时，容器应该增长（每个添加的组件使用100px）

听起来你可以在css中使用flexbox完成样式：

.container {
    display: inline-flex;
    flex-direction: row;
    padding: 2px;
    min-width: 500px;
    height: 120px;
    background-color: yellow;
}
.component {
    background-color: grey;
    flex: 0 1 200px;
    min-width: 100px;
    height: 50px;
    margin: 2px;
}

这样你就不必通过jQuery观察组件了。如果组件也应该具有可变高度，并且容器可以具有多行，则事情变得更加棘手。然后你需要更具体地说明约束。

编辑：如果你不能使用flexbox for IE9，那么试试：

将事件侦听器添加到容器内的组件中（而不是调整单个组件的大小）
检查（从DOM读取）容器中有多少组件
if（容器宽度 - （组件宽度*旧组件数））＆lt; 100
然后不允许收缩，所以展开容器
否则
遍历每个组件以缩小它们

如果内部元素太小，则自动重新调整容器大小

1 个答案: