如何在网格中以可编辑的方式设置文本区域

Question

我已经使用Gridster 2在我的角度应用程序中创建了Widget。 但是我现在有一个问题，在小部件中有一个文本区域输入字段，但是该输入字段不可编辑，因为整个小部件都是可拖动的。

我尝试使用 z 索引，但它不起作用。

代码如下：

<gridster-item>
<textarea class="textarea" matInput placeholder="Enter your comment ..." [(ngModel)]="feedsComment"></textarea>
</gridster-item>

如何设置我的小部件，以便我可以编辑此输入字段。

此致敬意

狮子座

Answer 1

您可以使用$event.stopPropagation()来防止与文本区域交互时的拖动。

以下是使用它的方法：

<gridster-item>
<div (mousedown)="$event.stopPropagation()" (touchstart)="$event.stopPropagation()">
<textarea class="textarea" matInput placeholder="Enter your comment ..." [(ngModel)]="feedsComment"></textarea>
</div>
</gridster-item>

Answer 2

我仍然可以在仪表板中使用文本区域。

我在仪表板中使用文本区域进行了演示。

您必须检查您的 css 和仪表板选项。

https://stackblitz.com/edit/my-angular-gridster2-textara

Answer 3

尝试将 textarea 元素放在带有 class： gridster-item-content 的div 中。

<div class="gridster-item-content">
<textarea class="textarea" matInput placeholder="Enter your comment ..." [(ngModel)]="feedsComment"></textarea>
</div>