- 首页
- 其他开发
- ng2-dragula 包中的单击事件不起作用
ng2-dragula 包中的单击事件不起作用
[英] Click event in ng2-dragula bag not working
本文介绍了ng2-dragula 包中的单击事件不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用的是 Angular 2 和 ng2-dragula.
我想让拖拉袋中的n"拖放项目可点击.
这是我的app.component.html:
<div class="tasksFrame"><div id="tasksCont" class='container' [dragula]='"first-bag"'><div (click)="onClick('ha')">任务 1</div><div (click)="onClick('ba')">任务 2</div><div (click)="onClick('ca')">任务 3</div>
<div class="editorFrame"><div id="editorCont" class='container' [dragula]='"first-bag"'>
<div *ngIf="showProps" class="propertiesFrame"><表格>Eigenschaft 1 <br><input type="text" name="property1"><br>Eigenschaft 2 <br><input type="text" name="property2"><br>Eigenschaft 3<input type="text" name="property3"><br></表单>
onClick() 函数永远不会被调用.
我的组件 app.component.ts 看起来像这样:
import { Component } from '@angular/core';从'ng2-dragula/ng2-dragula'导入{ DragulaService}；@成分({选择器:'我的应用'，templateUrl: 'app/app.component.html',styleUrls: ['app/app.component.css'],视图提供者:[DragulaService]，})导出类 AppComponent {私人表演道具=假；构造函数(私有 dragulaService:DragulaService){dragulaService.setOptions('第一包', {removeOnSpill: 真,复制:(el:元素，目标:元素，源:元素，兄弟:元素):布尔=>{var editorcont = document.getElementById('editorCont');返回 !target.contains(editorcont);},接受:(el:元素，目标:元素，源:元素，兄弟:元素):boolean =>{var taskscont = document.getElementById('tasksCont');返回 !target.contains(taskscont);//元素不能被拖放到任务容器中},});};onClick(项目:字符串){//没有被解雇var editorcont = document.getElementById('editorCont');//if(editorcont.contains(element)){//this.showProps = true;//}//别的{//this.showProps = false;//}};}
我认为这是因为 div 位于 Dragula 容器中.但是我怎样才能让dragula 容器中的div 可以点击?
解决方案
onClick() 没有被调用，因为你在技术上不会点击你拖放的 div，您只需左键单击 div 并将其拖走，这不会触发单击事件.你需要点击div，暂时按住它，然后在那里松开.真的很难解释，也许 w3schools 定义会澄清问题:
<块引用>
onclick 属性在鼠标点击元素时触发.
当在元素上按下鼠标按钮时，会触发 onmousedown 属性.
与 onmousedown 事件相关的事件顺序(对于鼠标左键/中键):
无论如何，您正在寻找 mousedown 事件，它在按下左键的那一刻被触发:
<div id="tasksCont" class='container' [dragula]='"first-bag"'><div (mousedown)="onClick('ha')">任务 1</div><div (mousedown)="onClick('ba')">任务 2</div><div (mousedown)="onClick('ca')">任务 3</div>
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?
解决方案
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>
这篇关于ng2-dragula 包中的单击事件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
