使单个角度网格项目可调整大小和可拖动？答案

【问题标题】：Make individual angular-gridster items resizable and draggable?使单个角度网格项目可调整大小和可拖动？
【发布时间】：2015-09-24 21:10:21
【问题描述】：

所以我使用 Angular-gridster 来为我的 Angular 应用程序提供仪表板感觉。

仪表板中的每个单独的小部件或项目都可以最小化、最大化、关闭。它们也可以被拖动和移动。

当我最小化一个小部件时，我注意到它仍然可以调整大小，我只是将小部件的底部拖到任意大小，而没有重新加载小部件。

看起来像这样：

看起来 resizable 属性设置为所有 gridster opts，所以我需要另一种方法来解决它。关于如何最好地去做的任何建议。

【问题讨论】：

标签： javascript angularjs user-interface resize gridster

【解决方案1】：

我还没有为我的任务找到解决方案。但是，如果您需要快速完成 - 您可以做到这一点：

/* hide all resize-handlers */
.resize-trick .gridster-item-resizable-handler { display: none; }

/* show one if wee need */
.resize-trick.resize-only-height .gridster-item-resizable-handler.handle-s { display: block; }

<li ... class="resize-trick resize-only-height"> 
There is your widgets ng-repeat...
Angular Gridster add handler elements for resize.
But you can just hide some of it using CSS :3

<div class="gridster-item-resizable-handler handle-s"></div>
<div class="gridster-item-resizable-handler handle-e"></div>
<div class="gridster-item-resizable-handler handle-n"></div>
<div class="gridster-item-resizable-handler handle-w"></div>
<div class="gridster-item-resizable-handler handle-se"></div>
<div class="gridster-item-resizable-handler handle-ne"></div>
<div class="gridster-item-resizable-handler handle-sw"></div>
<div class="gridster-item-resizable-handler handle-nw"></div>

</li>

【讨论】：