آموزش 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%)';
        }

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

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