如果移动一个或另一个,如何使两个 div 靠在一起
How to keep two divs close together if you move one or the other
我遇到了以下情况:
- 我的化身有三个可能的编码挑战
- a) 你可以点击头像打开调试控制台
- b) 您可以点击扬声器或麦克风图标打开 on/off
- 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: ""
}
}
我知道,这很难看,但我稍后会修复它。
如果我遗漏了什么或拼错了什么,请原谅。
我用这个问题解决了我的问题,我自己也回答了。
我遇到了以下情况:
- 我的化身有三个可能的编码挑战
- a) 你可以点击头像打开调试控制台
- b) 您可以点击扬声器或麦克风图标打开 on/off
- 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: ""
}
}
我知道,这很难看,但我稍后会修复它。
如果我遗漏了什么或拼错了什么,请原谅。
我用这个问题解决了我的问题,我自己也回答了。