1

我正在使用 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 可以点击呢？

4

1 回答 1

0

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

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

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

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>
于 2016-11-03T17:58:43.977 回答