Question

我遇到以下情况：

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

问题：

上面的每个项目（a，b和c）都有一个HANDLE CLICK（事件）发生了什么，我解决了这个问题，就是单击此代码使我解决了手柄单击相互干扰的问题。

MOVEABLEAVATAR：

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
}

}

用于单击图标（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时。当您将鼠标“放在” MIC和扬声器之间时，我只能单击并拖拽。这很好，但很不稳定，看起来也不专业。

我正在使用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（events），这很简单：

(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都不会更改，并且保持“ 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

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

1 个答案: