• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

173
Vistas
How do you move a draggable emoji image back 100px when it reaches the border of the div container?

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;
                }
         ```
almost 3 years ago · Santiago Gelvez
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda