آموزش drag المان با جاوا اسکریپت

در این مقاله به آموزش جامع Drag کردن المان با جاوا اسکریپت می‌پردازیم. در این آموزش با یک کد بسیار ساده و همراه ویدیو آموزشی، به شما یاد خواهیم داد که چگونه درگ المان را بنویسید.

همانطور که میدانید ایونت های این کار در خود HTML موجود میباشد، اما ظاهر و کیفیت مناسبی ندارد.

دراین آموزش، با چند خط کد بسیار ساده، میتوانیم هر المانی را بصورت کامل از جای اولیه خود جا به جا کرده و در هر قسمت از صفحه رها کنیم.

پیش نیازها

• آشنایی با زبان جاوا اسکریپت
• آشنایی با DOM (Document Object Model)
• آشنایی با رویدادها (Events) در جاوا اسکریپت

در HTML کد زیر را بنویسید:

    <div class="box"></div>

و در javascript کد زیر را بنویسید:

    const box = document.querySelector(".box");
        let x = 0
        let y = 0
        box.addEventListener('mousedown', () => {
            window.addEventListener('mousemove', moveBox)
        })
        box.addEventListener('mouseup', () => {
            window.removeEventListener('mousemove', moveBox)
        })
        function moveBox(e) {
            x = e.clientX
            y = e.clientY
            box.style.position = 'absolute'
            box.style.top = y + 'px'
            box.style.left = x + 'px'
            box.style.transform = 'translate(-50%, -50%)';
        }

در زیر هم میتوانید آموزش ویدیویی این مثال کاربردی جاوا اسکریپت را با تدریس پارسا قربانیان ببینید:

امیدواریم از این مقاله ساخت کلیک راست اختصاصی با جاوا اسکریپت نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.