Question

我正在Angular 5中使用Draggable和Droppable插件。文档链接：https://mattlewis92.github.io/angular-draggable-droppable/docs/。

我有一个要求，我需要在应用了可拖动对象的div上单击时显示一个弹出窗口。我正在使用此代码：

    <div class="circle" mwlDraggable [dropData]="{event: event}"  [dragAxis]="{x: event.draggable, y: event.draggable}" (dragStart)="fromEng = eng.id"  (click)="handleEvent(event, true)">
       <ng-container  *ngTemplateOutlet="tooltipBlock"></ng-container>
    </div>


    <ng-template #tooltipBlock>
     <span class="tooltiptext" >{{ event.title }}</span>
    </ng-template>

点击事件不会在首次点击时触发。第二次单击后触发。我需要的是当我们按住并移动元素并单击handleEvent函数时可拖动的工作。我已经尝试过mouseup，但这也行不通。

Answer 1

我在工具提示上添加了click事件，然后它起作用了。

<ng-template #tooltipBlock>
    <span class="tooltiptext" (click)="handleEvent(event, true)">{{ event.title }}</span>
</ng-template>

更新：由于工具提示位于圆div内，因此上述解决方案在单击圆div的边框时造成了问题。因此，我必须在circle div中使用tap事件，为此我安装了hammerjs：

npm install --save hammerjs 
npm install --save-dev @types/hammerjs

然后将hammerjs导入app.module.ts中：

import 'hammerjs';

然后更新代码：

<div class="circle" mwlDraggable [dropData]="{event: event}"  [dragAxis]="{x: event.draggable, y: event.draggable}" (dragStart)="fromEng = eng.id"  (tap)="handleEvent(event, true)">
   <ng-container  *ngTemplateOutlet="tooltipBlock"></ng-container>
</div>


<ng-template #tooltipBlock>
 <span class="tooltiptext" >{{ event.title }}</span>
</ng-template>

Angular Draggable，工具提示，然后单击

1 个答案: