Question

私は角度2とng2-dragulaを使用しています。

ドラッグラップのドロップ項目をクリック可能にしたいです。

これは私のapp.component.htmlです：onClick()関数が呼び出されることはありません

<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> 

。

マイコンポーネント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イベントに関連するイベントの順序（左/中央マウスボタンのために）：とにかく

• onclickの
• onMouseUpの

れるonmousedown、あなたがいます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>