Angular 可拖动、工具提示和点击

Question

我在 Angular 中使用 Draggable 和 Droppable 插件 5. 文档 link: 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

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

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

更新： 当点击圆 div 的边界时，上述解决方案会产生问题，因为工具提示位于圆 div 内。所以我不得不在圈子 div 中使用 tap 事件，为此我安装了 hammerjs:

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

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

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 可拖动、工具提示和点击

Angular Draggable, tooltip and click

click

draggable

angular