I have a function where the user can select different emojis in a container but i want it so that when the user moves outside the x and y values it will push the image back into the container by a few pxs to reset the if statement, i tried emoji.style.top but it wont work.
HTML
<div class="canvas">
<div class = "emoji-container">
<div class="emoji" id="smile"></div>
<div class="emoji" id="sad"></div>
<div class="emoji" id="normal"></div>
<div class="emoji" id="shocked"></div>
<div class="emoji" id="cry"></div>
<div class="emoji" id="sick"></div>
<div class="emoji" id="suprised"></div>
<div class="emoji" id="verySad"></div>
<div class="emoji" id="worried"></div>
</div>
</div>
CSS
.canvas{
margin: 20px;
display: block;
position: fixed;
text-align: center;
top: 40rem;
left:33rem;
width:1500px;
height:500px;
border: 10px var(--clr--color3) solid;
background-color: var(--clr--color1);
z-index: 0;
overflow: hidden;
}
#canvas{
border-radius: 5px;
background-color: #f0f0f0;
}
.emoji-container{
display:flex;
}
.emoji-container .emoji{
width:125px;
height:125px;
margin: 5px;
}
#emoji-choice{
top:73rem;
left:55rem;
padding-right: 36rem;
position: fixed;
font-size: 70px;
background-color: var(--clr--color1);
border: 5px var(--clr--color3) solid;
Javascript
var emojiChoice = document.getElementById("emoji-choice");
const move = function(dragEmoji){
const emojis = document.querySelectorAll(".emoji");
emojis.forEach(dragEmoji => {
dragEmoji.addEventListener("mousedown", () => {
dragEmoji.style.position = "absolute";
emoji = dragEmoji;
document.onmousemove = (e) =>{
var emojiPos = emoji.getBoundingClientRect();
if(emojiPos.x>1910){
emoji.style.left = x -605 + "px";
emoji.style.top = y -740+ "px";
emoji = null;
}
if(emojiPos.y>1030){
emoji = null;
}
```