ng2-dragula 包中的单击事件不起作用

Question

我正在使用 Angular 2 和 ng2-dragula。

我想让拖放包中的拖放项目可点击。

这是我的 app.component.html：

<div id="rootFrame">
    <div class="tasksFrame">
        <div id="tasksCont" class='container' [dragula]='"first-bag"'>
            <div (click)="onClick('ha')">Task 1</div>
            <div (click)="onClick('ba')">Task 2</div>
            <div (click)="onClick('ca')">Task 3</div>
        </div>
    </div>

    <div class="editorFrame">
        <div id="editorCont" class='container' [dragula]='"first-bag"'>
        </div>
    </div>

    <div *ngIf="showProps" class="propertiesFrame">
        <form>
            Eigenschaft 1<br>
            <input type="text" name="property1"><br> Eigenschaft 2<br>
            <input type="text" name="property2"><br> Eigenschaft 3<br>
            <input type="text" name="property3"><br>
        </form>
    </div>
</div>

onClick() 函数永远不会被调用。

我的组件 app.component.ts 如下所示：

import { Component } from '@angular/core';
import { DragulaService } from 'ng2-dragula/ng2-dragula';

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html',
    styleUrls: ['app/app.component.css'],
    viewProviders: [DragulaService],

})
export class AppComponent {


    private showProps = false;

    constructor(private dragulaService: DragulaService) {

        dragulaService.setOptions('first-bag', {
            removeOnSpill: true,
            copy: (el: Element, target: Element, source: Element, sibling: Element): boolean => {
                var editorcont = document.getElementById('editorCont');
                return !target.contains(editorcont);
            },
            accepts: (el: Element, target: Element, source: Element, sibling: Element): boolean => {
                var taskscont = document.getElementById('tasksCont');
                return !target.contains(taskscont); // elements can not be dropped to Tasks Container
            },

        });

    };

    onClick(item: String) {
        //NOT FIRED

        var editorcont = document.getElementById('editorCont');
        // if(editorcont.contains(element)){
        //     this.showProps = true;
        // }
        // else{
        //     this.showProps = false;
        // }
    };
}

我认为这是因为 div 位于 Dragula 容器中。但是如何使 Dragula 容器中的 div 可点击？

Answer 1

onClick() 未被调用，因为从技术上讲，您不会单击拖放的div，您只需左键单击 div 并将其拖走，这不会触发单击事件。您需要单击div，暂时按住它，然后将其释放。真的很难解释，也许w3schools 的定义会澄清一切：

onclick 属性会在鼠标单击元素时触发。

当在元素上按下鼠标按钮时，onmousedown 属性会触发。

onmousedown事件相关的事件顺序（鼠标左/中键）：

• 鼠标按下
• onmouseup
• 点击

无论如何，您正在寻找 mousedown 事件，它在按下左键的那一刻触发：

<div class="tasksFrame">
    <div id="tasksCont" class='container' [dragula]='"first-bag"'>
        <div (mousedown)="onClick('ha')">Task 1</div>
        <div (mousedown)="onClick('ba')">Task 2</div>
        <div (mousedown)="onClick('ca')">Task 3</div>
    </div>
</div>