时间戳

首页 > 解决方案 > Angular Draggable，工具提示和点击

angular - Angular Draggable，工具提示和点击

问题描述

我在 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，但这也不起作用。

标签： angularclickdraggable

解决方案

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

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

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

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

然后导入hammerjsapp.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>

推荐阅读