ОК, я крутил свои колеса:
Мой вопрос такой:
Вот мой 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 -->
Вот что я пытаюсь сделать:
- Когда вы щелкаете и перетаскиваете внешнюю обертку, аватер и все, что внутри, перетаскивается.(это работает, а не проблема)
- Когда вы просто нажимаете «CLICK» на изображении (внутри PARENT OUTER WRAPPER), открывается модальное окно (это работает, а не проблема)
- Когда вы просто «НАЖИМАЕТЕ» на значки MIC или SPEAKER, они отключаются / включаются (это тоже работает без проблем)
- СДЕЛАЙТЕ ИХ ВСЕ РАБОТЫ БЕЗ ВМЕШАТЕЛЬСТВА С КАЖДЫМ ДРУГИМ!
ПРОБЛЕМА:
Я хочу, чтобы кнопки CLICK, 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);
}
ССЫЛКИ:
а) Мой оригинальный вопрос: Хоw, чтобы держать два деления близко друг к другу, если вы двигаете один или другой , на который, я полагаю, мне почти ответили: http://jsfiddle.net/2EqA3/3/
b) Использование элементов этого вопроса: D3 Различают щелчок и перетаскивание для элемента, который имеет поведение перетаскивания