好吧，我纺纱我的车轮：
我的困惑是：
这里是我的HTML：
<!-- PARENT OUTER WRAPPER -->
<div id="avatarmoveable" class="moveablecontainer avatarBubble"
title="Click on an HOLD to drag avatar"
(click)="avatarMoveClick($event,'moveavatar')"
ngDraggable>
<!-- OUTER WRAPPER -->
<div class="avatarsays box-opener">
<!-- DEBUG CONSOLE OUTER WRAPPER -->
<div class="debugcontainer"
title="Click to OPEN DEBUG Console or say, 'OPEN DEBUG CONSOLE'."
*ngIf="isVisible"
(click)="showHideCSMModal($event, 'debugconsole')">
<img id="debugavatar" class="avatarimg avatar img-circle" src="../../../assets/images/avatar/avatar_l.svg">
</div>
<!-- END DEBUG OUTER WRAPPER -->
<!-- ICONS OUTER WRAPPER -->
<div id="iconscont" class="iconscontainer">
<!-- MICROPHONE ICON -->
<a class="avataricons talk" href="javascript:;"
(click)="handleClick($event,'miconoff')"
(condition)="micon" title="Click the Mic ON or OFF!">
<i id="mic" [ngClass]="micon ? 'fa fa-microphone iconactive' : 'fa fa-microphone-slash iconactive'"></i>
</a>
<!-- SPEARKER ICON -->
<a class="avataricons listen" href="javascript:;"
(click)="handleClick($event,'spkronoff')"
(condition)="spkron" title="Click the Speaker ON or OFF!">
<i id="spkr" [ngClass]="spkron ? 'fa fa-volume-up iconactive' : 'fa fa-volume-off iconactive'"></i>
</a>
</div>
<!-- END ICONS OUTER WRAPPER -->
</div>
<!-- END OUTER WRAPPER -->
</div>
<!-- END PARENT OUTER WRAPPER -->
这里就是我试图完成：
- 当您单击并拖动外部包装，该avater和里面的东西会拖累。 （这是工作，不是一个问题）
- 当你只是“点击”，在图像上，一个模式弹开（父外部包装内）（这是工作，而不是一个问题）
- 当你只是在MIC或扬声器图标“点击”，他们禁用/启用（这也算工作没有问题）
- 让他们都工作，没有相互干扰！
问题：
我想保持咔嚓的dragstart，的DragDrop，DRAGEND分开，所以当我点击并拖动，模态不会开......这就是我现在面对的问题。
这里是我的删节.TS代码：
注：我使用ngDraggable这是真的很酷。
...
变量定义：
public avatarBUBBLE: HTMLElement; //OUTER MOST PARENT DIV
public debugCONSOLE: HTMLElement; //DEBUG CONSOLE
public micICON: HTMLElement; //MICROPHONE ICON
public spkrICON: HTMLElement; //SPEAKER ICON
...
现在，要素：
ngOnInit() {
//TYPE ERROR CHECK
this.**typeErrorCheck**();
this.avatarBUBBLE = document.querySelector("#avatarmoveable") as HTMLElement;
this.debugCONSOLE = document.querySelector("#debugavatar") as HTMLElement;
this.micICON = document.querySelector(".talk") as HTMLElement;
this.spkrICON = document.querySelector(".listen") as HTMLElement;
}
...
ngAfterViewInit() {
this.avatarBUBBLE = document.querySelector("#avatarmoveable") as HTMLElement;
this.debugCONSOLE = document.querySelector("#debugavatar") as HTMLElement;
this.micICON = document.querySelector(".talk") as HTMLElement;
this.spkrICON = document.querySelector(".listen") as HTMLElement;
}
...
我的事件：
onClick(event: any) {
event.preventDefault();
console.log("ON CLICK: ", event);
if (event) {
console.log("CLICK: event.target.id: ", event.currentTarget.id);
return true;
} else {
return false;
}
}
onMouseDown(event: any) {
event.preventDefault();
console.log("ON MOUSE Down: ", event);
if (event) {
console.log("MOUSEDOWN: event.target.id: ", event.target.id);
return true;
} else {
return false;
}
}
onMouseUp(event: any) {
event.preventDefault();
console.log("ON MOUSE UP: ", event);
if (event) {
console.log("MOUSEUP: event.target.id: ", event.target.id);
return true;
} else {
return false;
}
}
onDragStart(event: any) {
console.log("ON DRAG START: ", event);
if (event) {
console.log("DRAGSTART: event.target.id: ", event.currentTarget.id);
this.avatarMoveClick(event, 'moveavatar');
return true;
} else {
return false;
}
}
onDragEnd(event: any) {
console.log("ON DRAG END: ", event);
if (event) {
console.log("DRAGEND: event.target.id: ", event.currentTarget.id);
this.avatarMoveClick(event, 'moveavatar');
return true;
} else {
return false;
}
}
onDragDrop(event: any) {
console.log("ON DRAG END: ", event);
if (event) {
console.log("DRAGDROP: event.target.id: ", event.currentTarget.id);
this.avatarMoveClick(event, 'moveavatar');
return true;
} else {
return false;
}
}
**typeErrorCheck**() { //Called in ngOnInit
this.timer = window.setTimeout(() => {
this.avatarBUBBLE.addEventListener('dragstart', this.onDragStart.bind(this.avatarBUBBLE));
this.avatarBUBBLE.addEventListener('dragend', this.onDragEnd.bind(this.avatarBUBBLE));
this.avatarBUBBLE.addEventListener('dragdrop', this.onDragDrop.bind(this.avatarBUBBLE));
this.debugCONSOLE.addEventListener('mouseup', this.onMouseUp.bind(this.debugCONSOLE));
this.micICON.addEventListener('mousedown', this.onMouseDown.bind(this.micICON));
this.spkrICON.addEventListener('mousedown', this.onMouseDown.bind(this.spkrICON));
}, 8000);
}
参考文献：
一）我原来的问题： 如何保持两个div并拢，如果你移动一个或另一个 ，我相信，我几乎与此回答： http://jsfiddle.net/2EqA3/3/
b）利用这个问题的元件： 点击并拖动之间D3微分对，其具有的阻力行为的元件
