如何将网格项目标题句柄应用于 angular2-grid？

Question

我正在使用来自https://github.com/BTMorton/angular2-grid 的示例代码。

但是，如演示 (https://bmorton.co.uk/angular/) 中所示，您只能使用蓝色列标题句柄而不是整个网格项来拖动网格项。

如何实现这样的功能？

干杯 卫生巾

Answer 1

你可以这样写：

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

通知dragHandle属性

另见对应plunkrhttps://plnkr.co/edit/gKEBR7iaurN8aI04g9bU?p=preview

Answer 2

您可以按照以下属性来理解模块：

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

对于您的问题，请注意保留'dragHandle': null 可以满足您的需求。 希望这会有所帮助。