Сделать отдельные элементы углового грида изменяемого размера и перетаскивать?

Question

Сделать отдельные элементы углового грида изменяемого размера и перетаскивать?

0

Поэтому я использую Angular-gridster для восприятия приборной панели в своем приложении Angular.

Каждый из отдельных виджетов или элементов панели инструментов можно минимизировать, максимизировать, закрыть. Их также можно тащить и перемещать.

Когда я сворачиваю виджет, я заметил, что он все еще изменен, и я просто перетаскиваю нижнюю часть виджета на любой размер без перезагрузки виджета.

Это выглядит так:

Похоже, что свойство resizable настроено на все настройки gridster, поэтому мне нужен еще один способ сделать это. Любые предложения о том, как лучше всего это делать.

Oscar McCullough 24 сен. 2015, в 23:26

Источник

Теги:

javascript

angularjs

user-interface

resize

gridster

1 ответ

Ещё вопросы

Vladimir Ishenko · Answer 1 · 2016-06-02T13-08-00.000Z

Я еще не нашел решения для своей задачи. Но если вам нужно сделать это быстро - вы можете сделать трюк:

/* 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>