Tengo una función en la que el usuario puede seleccionar diferentes emojis en un contenedor, pero quiero que cuando el usuario se mueva fuera de los valores x e y, empuje la imagen de regreso al contenedor unos pocos pxs para restablecer la declaración if, yo probé emoji.style.top pero no funcionará.

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; } ```