ng2-dragula袋中的Click事件不起作用 [英] Click event in ng2-dragula bag not working

问题描述

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

I'm using Angular 2 and ng2-dragula.

我想使Dragula包中的"n"个拖放项可点击.

I want to make the drag 'n' drop items in a dragula bag clickable.

这是我的 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 看起来像这样:

My component app.component.ts looks like this:

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可点击?

I think it's because divs are in a dragula container. But how can I make the divs in the dragula container clickable?

推荐答案

onClick()的原因是，从技术上讲，您无需单击拖放的div，只需单击div并将其拖走即可不会触发点击事件.您需要单击div，暂时将其按住，然后将其释放.真的很难解释，也许 w3schools 的定义会清除一切:

onClick() is not called because you technically don't click on div you drag and drop, you simply left click div and drag it away and that doesn't trigger click event. You need to click on div, hold it for the moment and then release it there. It's hard to explain really, maybe w3schools definition will clear things up:

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

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

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

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

与onmousedown事件相关的事件顺序(用于鼠标左/中键):

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

• onmousedown
• onmouseup
• onclick

• onmousedown
• onmouseup
• onclick

无论如何，您正在寻找 mousedown 事件，该事件在按下鼠标左键时立即触发:

Anyway, you are looking for mousedown event, it is triggered the moment left click is pressed:

<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事件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！