Как держать два деления близко друг к другу, если вы двигаете один или другой

Question

У меня есть ситуация, когда происходит следующее:

1. У меня есть аватар с тремя возможными проблемами кодирования
2. a) вы можете нажать на лицо аватара, чтобы открыть отладкуконсоль
3. б) вы можете нажать на значок динамика или микрофона, чтобы включить / выключить
4. в) вы можете нажимать между значками и перемещать аватар

ПРОБЛЕМА:

Для каждого элемента выше (а, b и c) есть РУЧНОЙ ЩЕЛЧОК (событие). Что я и решил, так это то, что щелчки на ручке мешают каждомудругие, которые я решил с помощью этого кода:

для MOVEABLEAVATAR:

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

для EVENT DRAG AVATAR EVENT:

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 или ЛИЦО аватара.Я могу только щелкать и перетаскивать, когда вы нажимаете мышью «МЕЖДУ» МИКРОФОНОМ и СПИКЕРОМ ... что хорошо, но шатко и не выглядит профессионально.

Я использую 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')"

, который отключает микрофон и динамик соответственно и наоборот

Кроме того, когда я нажимаю и перетаскиваю лицо аватара, ОТКРЫВАЕТСЯ КОНСОЛЬ ОТЛАДКИ, чего я не хочучтобы сделать, что я и решил с помощью исходного кода выше.

Это должно быть простым и легким решением, поэтому, когда пользователь что-то делает, это 'Интуитивно понятный и не путать.Мой босс говорит: «Мы можем сделать лучше ...» Я согласен.

Наконец, когда я на самом деле перемещаю аватар, я хочу, чтобы в окне чата ПЕРЕМЕЩАЛИСЬ с аватаром ... продолжая так же, какэто в образе.Дело в том, что окно чата исчезает через 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

Я решил свои проблемы с помощью этого вопроса, на который я также ответил сам.

Как использовать, перетаскивать, драгендировать, щелкать мышью, размыкать мышью, соединяя их тремя делениями и удерживая их все отдельно, но равными