Comment appliquer le descripteur d'en-tête d'élément de grille à angular2-grid? - angulaire

J'utilise un exemple de code de https://github.com/BTMorton/angular2-grid.

Cependant, comme le montre la démo (https://bmorton.co.uk/angular/) vous ne pouvez faire glisser des éléments de la grille qu’en utilisant la poignée d’en-tête de la colonne bleue et non l’ensemble de l’élément de la grille.

Comment puis-je obtenir une telle fonctionnalité?

À votre santé Sanket

Réponses:

Vous pouvez écrire quelque chose comme ceci:

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

Remarquer dragHandle propriété

Voir aussi le plunkr correspondant https://plnkr.co/edit/gKEBR7iaurN8aI04g9bU?p=preview

Vous pouvez suivre ces propriétés pour comprendre le module:

{
"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.
}

Pour votre question, notez que garder "dragHandle": null vous fournit ce que vous voulez. J'espère que cela t'aides.