css - 如果移动一个或另一个，如何使两个 div 靠在一起

Question

我遇到了以下情况:

1. 我有一个化身，它具有三个可能的编码挑战
2. a) 你可以点击头像的脸来打开调试控制台
3. b) 您可以点击扬声器或麦克风图标来打开/关闭
4. c) 您可以在图标之间点击并移动头像

问题:

上面的每个元素(a、b 和 c)都有一个 HANDLE CLICK(event)发生了什么，我解决了这个问题，是 handle-clicks 相互干扰，我用这段代码解决了这个问题:

对于可移动头像:

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

对于变装头像事件:

public avatarMoveClick(事件:任意){

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

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

点击图标(麦克风或扬声器)

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 时。当您将鼠标放在 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 handle-click(事件)，这很简单:

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

和

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

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

此外，当我在头像的脸上单击并拖动时，DEBUG CONSOLE 打开，这是我不想做的，这是我用上面的初始代码解决的问题。

这需要是一个简单、容易的解决方案，这样当用户做某事时，它是直观的而不是困惑的。我的老板说“我们可以做得更好……”我同意。

最后，实际上，当我移动头像时，我想在聊天框中随头像一起移动...保持图片中的样子。问题是聊天框会在 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 都不会改变并保持“translate(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