如果您移动一个或另一个，如何将两个 div 保持在一起 [英] How to keep two divs close together if you move one or the other

查看：22
本文介绍了如果您移动一个或另一个，如何将两个 div 保持在一起的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我遇到了以下情况:

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

问题:

上面的每个项目(a、b 和 c)都有一个 HANDLE CLICK(event)发生了什么，我解决了这个问题，是手柄点击相互干扰，我用这段代码解决了这个问题:

对于可移动的化身:

if (event.target.id !== "moveableavatar") {返回;} 别的 {console.log("事件显示调试:", 事件);......我在这里做点什么......不用担心}

对于 DRAG AVATAR 活动:

public avatarMoveClick(event: any) {

if (event.target.id !== "iconscont") {返回;} 别的 {console.log("AvatarMoveCLICK 事件:", 事件);//捕获移动事件......我在这里做点什么......不用担心}

}

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

if (event.target.id !== "mic" && event.target.id !== "spkr") {返回;} 别的 {console.log("AvatarMoveCLICK 事件:", 事件);//捕获移动事件......我在这里做点什么......不用担心}

这分为三个部分:当您单击 MIC、SPEAKER 或头像的 FACE 时.当您将鼠标放在麦克风和扬声器之间"时，我只能单击并拖动...这很好，但很不稳定，看起来不专业.

我正在使用 Angular 5 和 ngDraggable，这很棒！

<img src="avatarimg.png" alt=""/>
然后，它旁边是聊天窗口......是的，我们正在使用语音命令......<div class="moveablechatwindow"><i src="avatarimg.png" alt=""></i><div class="userspeaks">应用程序</div><i src="avatarimg.png" alt=""></i><div class="avatarresponds"></div>

这是上面简化代码的结果

好的，上面的所有代码 (HTML) 都包含在 

对于有角的

我想要完成的:

我希望用户可以在任何地方自由单击和拖动，但不干扰 MIC 和 SPEAKER 手柄单击(事件)，这很简单:

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

和

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

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

此外，当我在头像的脸上单击并拖动时，调试控制台打开，这是我不想做的，这是我用上面的初始代码解决的问题.

这需要是一个简单易行的解决方案，以便用户在做某事时直观而不是混乱.我的老板说我们可以做得更好……"我同意.

最后，当我移动头像时，我希望聊天框与头像一起移动...保持图像中的状态.问题是聊天框在 5 秒后消失，但不会消失.

这是我尝试"处理同时移动两者的代码.

trans，参数，等于:translate(0px,0px)"

private calcChatBotPos(trans: string) {让 re =/[^0-9\-.,]/g;let matrix = trans.replace(re, '').split(',');让 x = 矩阵 [0];让 y = 矩阵 [1];console.log("xTrans:" + x + "px");console.log("yTrans:" + y + "px");让 avatarstart = "translate(0px, 0px)";//这是基础let matrixstart = avatarstart.replace(re, '').split(',');让 avatarstartx = matrixstart[0];让 avatarstarty = matrixstart[1];console.log("avatarXtrans:" + avatarstartx + "px");console.log("avatarYtrans:" + avatarstarty + "px");让 newX = String(+x + +avatarstartx);让 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 + ")");} 别的 {this.transformXY = true;this.css.moveablechatwindow.transform.orgxy = "translate(0px,50px)";console.log("里面 ELSE...." + this.css.moveablechatwindow.transform.orgxy);}}

最后一个问题是 this.css.moveablechatwindow.transform 不会改变并且无论我做什么都保持translate(0px,0px)".

this.css.... 来自这里:

css = {可移动包装:{转变: {newxy: "",orgxy:"}}

我知道，这很丑，但我稍后会修复它.

如果我遗漏了什么或拼错了什么，请原谅我.

解决方案

我解决了这个问题，我自己也回答了这个问题.

如何使用，dragstart, dragend, click, mouseup, mousedown 将三个 div 放在一起并保持它们独立但相等

I have a situation where the following occurs:

  1. I have an avatar that has three possible coding challenges
  2. a) you can click on the avatar's face to open a debug console
  3. b) you can click on a speaker or mic icon to turn on/off
  4. c) you can click between the icons and MOVE the avatar

PROBLEM:

There is a HANDLE CLICK(event) for each item above (a, b, and c) What's happening and I solved this, is that the handle-clicks interfere with each other which I solved with this code:

FOR THE MOVEABLEAVATAR:

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

FOR THE DRAG AVATAR EVENT:

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
}

}

FOR CLICKING on the ICONS (MIC or 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
}

This is placed in three sections: When you click on MIC, SPEAKER or the FACE of the avatar. I can only click and DRAG when you put your mouse "BETWEEN" the MIC and SPEAKER... which is fine but wonky and doesn't look professional.

I'm using Angular 5 and ngDraggable which is GREAT!

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

Here's the results of the dumbed down code above

OK, so all that code above (HTML) is wrapped in the 

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

What I want to Accomplish:

I want to user to freely click and drag ANYWHERE but NOT interfere with the MIC and SPEAKER handle-click(events) which are simple this:

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

and

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

which TURNS OFF the mic and speaker respectively and vice versa

Also, when I CLICK and DRAG on the avatar's face, the DEBUG CONSOLE OPENS which is what I don't want to do, which is what I solved with the initial code above.

This needs to be a simple, easy solution so when the user does something it's intuitive and not confusion. My boss says "We can do better..." I agree.

Finally, when I do, in fact, move the avatar, I want to the chatbox to MOVE with the avatar... keeping just like it is in the image. The thing is the chatbox fades after 5 secs but doesn't go away.

Here's my code for "trying" to handle moving the two in tandem.

trans, the argument, equals: "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);
  }

}

The last problem is that the this.css.moveablechatwindow.transform will not change and STAYS "translate(0px,0px)" no matter what I do.

this.css.... is from here:

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

I know, this is ugly, but I'll fix it later.

If I missed something or misspelled something, forgive me.

解决方案

I solved my issues with this question which I also answered myself.

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

这篇关于如果您移动一个或另一个，如何将两个 div 保持在一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆