如果你移动一个或另一个，如何保持两个div紧密相连

Question

我遇到以下情况：

1. 我的头像有三种可能的编码挑战
2. a）您可以单击头像的脸来打开调试控制台
3. b）您可以单击扬声器或麦克风图标来打开/关闭
4. c）您可以在图标之间单击并移动头像

问题：

上面的每个项目都有一个HANDLE CLICK（事件）（a，b和c）发生了什么，我解决了这个问题，是手柄点击干扰了我用这段代码解决的问题：

对于可移动的：

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

对于DRAG AVATAR活动：

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
}

}

点击图标（MIC或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
}

这分为三个部分：当您单击MIC，SPEAKER或头像的FACE时。当你把你的鼠标“BETWEEN”MIC和SPEAKER时，我只能点击并拖动...这很好，但是看起来很不专业。

我正在使用Angular 5和ngDraggable这是伟大的！

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

这是上面的愚蠢代码的结果

好的，所以上面的所有代码（HTML）都包含在

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

我想要完成的事情：

我希望用户可以随意点击并拖动任何地方但不会干扰MIC和SPEAKER手柄点击（事件），这很简单：

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

和

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

它分别关闭麦克风和扬声器，反之亦然

此外，当我在头像的脸上点击和拖拽时，DEBUG CONSOLE OPENS这是我不想做的，这是我用上面的初始代码解决的。

这需要一个简单易用的解决方案，因此当用户做某事时，它是直观的而不是混乱。我的老板说“我们可以做得更好......”我同意。

最后，当我这么做的时候，实际上，移动头像，我想让聊天盒与头像一起移动......保持就像它在图像中一样。事情是聊天箱在5秒后消失，但不会消失。

这是我的“尝试”处理两个一前一后移动的代码。

trans，参数，等于：“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);
  }

}

最后一个问题是，无论我做什么，this.css.moveablechatwindow.transform都不会改变并且STAYS“翻译（0px，0px）”。

this.css ....来自这里：

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

我知道，这很难看，但我稍后会解决。

如果我错过了什么或拼写错误的东西，请原谅我。

Answer 1

我用这个问题解决了我的问题，我也回答了问题。

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