How to keep two divs close together if you move on

Question

I have a situation where the following occurs:

1. I have an avatar that has three possible coding challenges
2. a) you can click on the avatar's face to open a debug console
3. b) you can click on a speaker or mic icon to turn on/off
4. c) you can click between the icons and MOVE the avatar

PROBLEM:

There is a HANDLE CLICK(event) for each item above (a, b, and c) What's happening and I solved this, is that the handle-clicks interfere with each other which I solved with this code:

FOR THE MOVEABLEAVATAR:

if (event.target.id !== "moveableavatar") {
  return;
} else {
  console.log("Event SHOW DEBUG: ", event);
  ... I do something here... no worries
}

FOR THE DRAG AVATAR EVENT:

public avatarMoveClick(event: any) {

if (event.target.id !== "iconscont") {
  return;
} else {

  console.log("AvatarMoveCLICK EVENT: ", event);
  //Capture move event
  ... I do something here... no worries
}

}

FOR CLICKING on the ICONS (MIC or SPEAKER)

if (event.target.id !== "mic" && event.target.id !== "spkr") {
  return;
} else {
  console.log("AvatarMoveCLICK EVENT: ", event);
  //Capture move event
  ... I do something here... no worries
}

This is placed in three sections: When you click on MIC, SPEAKER or the FACE of the avatar. I can only click and DRAG when you put your mouse "BETWEEN" the MIC and SPEAKER... which is fine but wonky and doesn't look professional.

I'm using Angular 5 and ngDraggable which is GREAT!

<div class="moveableavatar">
     <img src="avatarimg.png" alt="" />
</div>

then, right next to it is the chat window... yes, we are using voice commands...

<div class="moveablechatwindow">
     <i src="avatarimg.png" alt=""></i>
   <div class="userspeaks">Applications</div>
     <i src="avatarimg.png" alt=""></i>
   <div class="avatarresponds"></div>
</div>

Here's the results of the dumbed down code above

OK, so all that code above (HTML) is wrapped in the

<app-avatar></app-avatar> for angular

What I want to Accomplish:

I want to user to freely click and drag ANYWHERE but NOT interfere with the MIC and SPEAKER handle-click(events) which are simple this:

(click)="handleClick($event,'mic')"

and

(click)="handleClick($event,'speaker')"

which TURNS OFF the mic and speaker respectively and vice versa

Also, when I CLICK and DRAG on the avatar's face, the DEBUG CONSOLE OPENS which is what I don't want to do, which is what I solved with the initial code above.

This needs to be a simple, easy solution so when the user does something it's intuitive and not confusion. My boss says "We can do better..." I agree.

Finally, when I do, in fact, move the avatar, I want to the chatbox to MOVE with the avatar... keeping just like it is in the image. The thing is the chatbox fades after 5 secs but doesn't go away.

Here's my code for "trying" to handle moving the two in tandem.

trans, the argument, equals: "translate(0px,0px)"

private calcChatBotPos(trans: string) {

  let re = /[^0-9\-.,]/g;
  let matrix = trans.replace(re, '').split(',');
  let x = matrix[0];
  let y = matrix[1];

  console.log("xTrans: " + x + "px");
  console.log("yTrans: " + y + "px");

  let avatarstart = "translate(0px, 0px)";  //This is the base
  let matrixstart = avatarstart.replace(re, '').split(',');
  let avatarstartx = matrixstart[0];
  let avatarstarty = matrixstart[1];

  console.log("avatarXtrans: " + avatarstartx + "px");
  console.log("avatarYtrans: " + avatarstarty + "px");

  let newX = String(+x + +avatarstartx);
  let newY = String(+y + +avatarstarty);

  newX = String(newX) + "px";
  newY = String(newY) + "px";

  if (trans !== "translate(0px,0px)") {
    this.transformXY = false;
    this.css.moveablechatwindow.transform.newxy = "translate(" + newX + "," + newY + ")";
    console.log("Inside IF...." + "translate(" + newX + "," + newY + ")");
  } else {
    this.transformXY = true;
    this.css.moveablechatwindow.transform.orgxy = "translate(0px,50px)";
    console.log("Inside ELSE...." + this.css.moveablechatwindow.transform.orgxy);
  }

}

The last problem is that the this.css.moveablechatwindow.transform will not change and STAYS "translate(0px,0px)" no matter what I do.

this.css.... is from here:

css = {
  moveableWrapper: {
    transform: {
      newxy: "",
      orgxy: ""
    }
  }

I know, this is ugly, but I'll fix it later.

If I missed something or misspelled something, forgive me.

Answer 1

I solved my issues with this question which I also answered myself.

How to use, dragstart, dragend, click, mouseup, mousedown with three divs together and keep them all separate but equal