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

Question

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

我想让拖动 'n' 将项目放入 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 定义会把事情搞清楚：

The onclick attribute fires on a mouse click on the element.

The onmousedown attribute fires when a mouse button is pressed down on the element.

The order of events related to the onmousedown event (for the left/middle mouse button):

onmousedown

onmouseup

onclick

无论如何，你正在寻找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>

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

Click event in ng2-dragula bag not working

click

angular2-template

ng2-dragula

angular