منظور از Drag و Drop چیست؟ اصلا Drag And Drop چیست؟ آموزش Drag و Drop در HTML … چگونه میتوانیم از HTML برای API مربوط به Drag و Drop استفاده کنیم؟
سرفصلهای پست
کار با drag و drop در HTML
کشیدن و رها کردن یا Drag و Drop یکی از رایج ترین ویژگی های کار با کنترل ها است. در این نوع حرکت کاربر ابتدا یک شی را می گیرد و سپس با کشیدن و رها کردن آن در مکان دیگر مکان آن را تغییر می دهد.
در html5، عملکرد کشیدن و رها کردن جزء استاندارد این نسخه است. همه عناصر قابل کشیدن هستند. پس بیاین در جلسه از مجموعه آموزش متن محور HTML ، در رابطه با استفاده از API مربوط به Drag و Drop بیشتر صحبت کنیم.
مثال کشیدن و رها کردن
مثال زیر یک نمونه ساده از کشیدن و رها کردن را نمایش می دهد:
<!DOCTYPE HTML> <html> <head> <style> #div1 { width: 350px; height: 120px; padding: 10px; border: 1px solid #aaaaaa; } </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>Drag the Mizfa image into the rectangle:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="https://mizfa.com/blog/wp-content/uploads/2018/10/logo-blog-main.png" draggable="true" ondragstart="drag(event)" width="336" height="100"> </body> </html>
کد های بالا ممکن است پیچیده به نظر بیایند، اما بگذارید تمام رویداد های این عملکرد را با هم بررسی کنیم. برای آشنایی با تگ img که در این کد استفاده شده است، میتوانید مقاله مربوط به آموزش تصاویر در HTML را بخوانید.
فعال کردن ویژگی کشیدن در عنصر
قبل از هر چیزی باید عنصر مورد نظر را قابل کشیدن کنیم با خاصیت draggable و مقدار true این مسئله حل می شود.
<img draggable="true">
چه چیزی بکشیم – ondragstart و setdata
پس از فعال کردن ویژگی کشیدن، باید تعیین کنیم چه عملی در هنگام کشیدن عنصر انجام شود. در مثال ابتدای مقاله، خاصیت ondragstart یک تابع را صدا زده می شود(drag) که تعیین می کند چه داده ای باید کشیدن شود.
تابع datatransfer.setdata نوع داده و مقدار داده کشیده شده را تعیین می کند.
function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }
در این مثال، نوع داده “text” است و مقدار آن شناسه عنصر قابل کشیدن.
کجا رها کنیم – ondragover
در رویداد ondragover، رویداد تعیین می کند کجا داده ها باید رها شوند.
به صورت پیش فرض، داده یا عنصر مورد نظر نمی توانند در سایر عناصر رها شوند. برای دادن اجازه رها سازی برروی سایر عناصر باید مانع اجرای پیش فرض رویداد رها کردن در عنصر مقصد شویم.
این مشکل با فرخوانی event.preventdefault در رویداد ondragover حل می شود:
event.preventDefault()
انجام رها سازی – ondrop
هنگامی که داده ها رها می شوند، یک رویداد رها سازی اجرا می شود.
در مثالی که در بالا آورده بودیم، تابع ondrop یک تابع به نام drop را که در پایین آورده ایم صدا میزند.
function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); }
فرخوانی preventdefault برای ممانعت از اجرای پیش فرض مدیریت داده(به صورت پیش فرض بازکردن به عنوان لینک در هنگام رها سازی).
دریافت داده های کشیده شده توسط تابع datatransfer.getdata. این تابع هر داده ای که برای تابع setdata تنظیم شده است را با همان نوع داده ای بازگشت می دهد.
داده رویداد کشیده شدن در واقع شناسه عنصر کشیده شده است.
چسباندن عنصر کشیده شده در عنصر رها شده.
مثال کاربردی :
36873
در مثال بالا یک نمونه Drag و Drop را مشاهده میکنید که میتوانید یک تصویر که لوگو میزفا هست را جا به جا کنید و به قولی بکشید و در کادر خالی رها کنید.
پایان ترم
[box type=”info” class=”question-from-users” width=””]یک نمونه استفاده از Drag&Drop در وب سایت گوگل مثال بزنید.
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبتنام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
در این مقاله با Drag و Drop در HTML آشنا شدیم. امیدوارم با آن آشنا شده باشید.
اگر سوال، پیشنهاد یا انتقادی داشتید لطفا حتما آن را بپرسید و من حتما آنها را در اولین فرصت پاسخ خواهم داد.
6 پاسخ
پاسخ سوال :
وقتی عکسی رو از کامپیوتر به داخل کادر جستجو درگ می کنیم کادر بزرگتری باز میشه که عبارت «Drop image here» (عکس را اینجا رها کنید) نوشته شده است.
سلام محمد. دقیقا مثلا توی Google Drive هم همچین چیزی هستش. جایزهات را دریافت میکنی.
سلام میشه لطفا بگین مشکل کدا چیه که اجرا drag and drop اجرا نمیشه؟
سلام زهرا، کد هایی که استفاده کردی برای بخشی از HTML هست که مستقیما با جاوا اسکریپت در ارتباطه و زبان جاوا اسکریپت یک زبان Case Sensitive هست یعنی حساس به حروف کوچک و بزرگ.
مثلا شما تابع preventDefault را به جای اینکه D بزرگ استفاده کنی از d کوچک استفاده کردی و برای همین کد هات کار نمیکنه.
باقی تابع ها هم همینطور میبایست کوچک و بزرگ بودن حروف رو رعایت کنی.
موفق باشی
سلام
من متوجه اون id که در تگ آوردین نشدم ممنون میشم بهم بگین
سلام متوجه کدوم قسمتش نشدی ؟
آی دی ها رو برای استایلدهیشون آوردیم وگرنه کاربرد دیگه ای ندارن. بقیه از طریق خاصیت های مشخص شده داخل پست کنترل میشن.