如果移动一个或另一个,如何使两个 div 靠在一起

How to keep two divs close together if you move one or the other

我遇到了以下情况:

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

问题:

上面的每一项(a、b 和 c)都有一个 HANDLE CLICK(事件) 发生了什么,我解决了这个问题,是 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 时。当您将鼠标 "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 handle-click(事件),这很简单:

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

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

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

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

这需要是一个简单易行的解决方案,这样当用户做某事时它是直观的而不是混乱的。我老板说 "We can do better..." 我同意。

最后,当我移动头像时,我想在聊天框中随头像一起移动...保持图片中的样子。问题是聊天框会在 5 秒后消失,但不会消失。

这是我的 "trying" 代码,用于处理串联移动两个。

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: ""
    }
  }

我知道,这很难看,但我稍后会修复它。

如果我遗漏了什么或拼错了什么,请原谅。

我用这个问题解决了我的问题,我自己也回答了。