Click event in ng2-dragula bag not working

人盡茶涼 提交于 2020-01-17 08:02:52

问题


I'm using Angular 2 and ng2-dragula.

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

This is my 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>

The onClick() function is never called.

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;
        // }
    };
}

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


回答1:


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:

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

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>


来源:https://stackoverflow.com/questions/40403298/click-event-in-ng2-dragula-bag-not-working

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!