angular - 如何在 Gridster 中可编辑地设置 textarea

Question

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

我尝试使用 z-index，但它不起作用。

代码如下：

<gridster-item>

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

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

此致，

狮子座

Answer 1

我仍然可以在仪表板中使用 textarea。

我在仪表板中用 textarea 做了一个演示。

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

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

Answer 2

您可以$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>