如果您移动一个或另一个，如何使两个div靠得很近 [英] How to keep two divs close together if you move one or the other
问题描述
我遇到以下情况:
- 我的头像有三个可能的编码挑战
- 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')"
分别关闭麦克风和扬声器，反之亦然
此外，当我单击并拖动头像的脸时，调试控制台打开，这是我不想做的，这是我使用上面的初始代码解决的.
这必须是一个简单易用的解决方案，因此，当用户执行某项操作时，这是直观而不是混乱的.我的老板说:我们可以做得更好……"我同意.
最后，实际上，当我移动化身时，我想与该化身一起进入聊天框以进行移动...保持图像中的状态不变.问题是聊天框在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: ""
}
}
我知道，这很丑陋，但我会在稍后修复.
如果我错过了某些东西或拼错了一些东西，请原谅我.
我用这个问题解决了自己的问题，我也回答了自己.
如何使用，拖动开始，dragend，click，mouseup，mousedown(三个div在一起)，并将它们分开但相等.
I have a situation where the following occurs:
- I have an avatar that has three possible coding challenges
- a) you can click on the avatar's face to open a debug console
- b) you can click on a speaker or mic icon to turn on/off
- 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.
这篇关于如果您移动一个或另一个，如何使两个div靠得很近的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
