Jak zastosować uchwyt nagłówka elementu siatki do siatki kątowej2? - kanciasty

Używam przykładowego kodu z https://github.com/BTMorton/angular2-grid.

Jednak, jak pokazano w wersji demo (https://bmorton.co.uk/angular/) możesz przeciągać elementy siatki tylko za pomocą niebieskiego uchwytu nagłówka kolumny, a nie całego elementu siatki.

Jak osiągnąć taką funkcjonalność?

Twoje zdrowie Sanket

Odpowiedzi:

Możesz napisać coś takiego:

<div [ngGrid]="gridConfig">
<div [ngGridItem]="{"dragHandle": ".handle", "fixed": true, "col": 2, "row": 1}">
<div class="handle">{{text}}</div>
</div>
</div>

Ogłoszenie dragHandle własność

Zobacz także odpowiedni fragment https://plnkr.co/edit/gKEBR7iaurN8aI04g9bU?p=preview

Możesz zrozumieć te właściwości, aby zrozumieć moduł:

{
"col": 1,               //  The start column for the item
"row": 1,               //  The start row for the item
"sizex": 1,             //  The start width in terms of columns for the item
"sizey": 1,             //  The start height in terms of rows for the item
"dragHandle": null,     //  The selector to be used for the drag handle. If null, uses the whole item
"resizeHandle": null,   //  The selector to be used for the resize handle. If null, uses "borderSize" pixels from the right for horizontal resize,
//    "borderSize" pixels from the bottom for vertical, and the square in the corner bottom-right for both
"borderSize": 15,
"fixed": false,         //  If the grid item should be cascaded or not. If yes, manual movement is required
"draggable": true,      //  If the grid item can be dragged. If this or the global setting is set to false, the item cannot be dragged.
"resizable": true       //  If the grid item can be resized. If this or the global setting is set to false, the item cannot be resized.
}

W przypadku pytania zauważ to "dragHandle": null zapewnia ci to, czego chcesz. Mam nadzieję że to pomoże.