• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

196
Views
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;
                }
         ```
about 3 years ago · Santiago Gelvez
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error