برای مدت طولانی توابع جاوا اسکریپت وجود داشته است که به ما امکان ایجاد واسط کشیدن و رها کردن را می دهد، اما هیچ یک از این پیاده سازی ها بومی مرورگر نبودند.

در HTML5، ما یک روش بومی برای ایجاد واسط کشیدن و رها کردن (با کمک کمی از جاوا اسکریپت) داریم.

من به شما اجازه ورود می دهم روی چگونه می توان به این …

پشتیبانی از مرورگر

من می خواهم قبل از پیشرفت این موضوع را کنار بگذارم: در حال حاضر کشیدن و رها کردن HTML5 توسط همه مرورگرهای اصلی دسکتاپ (از جمله IE (حتی IE 5.5 پشتیبانی جزئی دارد) پشتیبانی می شود) اما در حال حاضر توسط هیچ یک از تلفن های همراه محبوب پشتیبانی نمی شود. مرورگرها

رویدادها را بکشید و رها کنید

در هر مرحله از عملیات کشیدن و رها کردن، رویداد متفاوتی اجرا می شود تا مرورگر بداند کد جاوا اسکریپت را باید اجرا کند. رویدادها عبارتند از:

• dragStart: زمانی که کاربر شروع به کشیدن عنصر می کند فعال می شود.
• dragEnter: زمانی که عنصر قابل کشیدن برای اولین بار روی عنصر هدف کشیده می شود، فعال می شود.
• dragOver: هنگامی که ماوس بر روی یک عنصر حرکت می کند، هنگامی که کشیدن اتفاق می افتد، فعال می شود.
• dragLeave: اگر مکان‌نمای کاربر هنگام کشیدن عنصری را ترک کند، فعال می‌شود.
• drag: هر بار که ماوس را در حین کشیدن عنصر خود حرکت می دهیم، شلیک می شود.
• drop: زمانی که دراپ واقعی انجام می شود شلیک می شود.
• dragEnd: زمانی فعال می شود که کاربر هنگام کشیدن شی، ماوس را رها می کند.

با همه این شنوندگان رویداد، کنترل زیادی بر روش عملکرد رابط خود و روش عملکرد دقیق آن در شرایط مختلف دارید.

شیء انتقال داده

اینجاست که تمام جادوهای کشیدن و رها کردن اتفاق می افتد. این شیء داده هایی را که با عملیات کشیدن فرستاده شده اند نگه می دارد. داده ها را می توان به روش های مختلفی تنظیم و بازیابی کرد که مهمترین آنها عبارتند از:

• dataTransfer.effectAllowed=value: این نوع اعمال مجاز را برمی گرداند، مقادیر ممکن هیچ، کپی، copyLink، copyMove، پیوند، لینک، انتقال، انتقال، همه و بدون مقدار اولیه هستند.
• dataTransfer.setData (فرمت، داده): داده های مشخص شده و قالب آن را اضافه می کند.
• dataTransfer.clearData( format ): تمام داده ها را برای یک فرمت خاص پاک می کند.
• dataTransfer.setDragImage(عنصر، x، y): تصویری را که می خواهید بکشید تنظیم می کند، مقادیر x و y مشخص می کنند مکان نما ماوس کجا باید باشد (0، 0 آن را در بالا سمت چپ قرار می دهد).
• data = dataTransfer.getData(format): همانطور که از نامش می‌گوید، داده‌های موجود را برای یک فرمت خاص برمی‌گرداند.

ایجاد یک مثال کشیدن و رها کردن

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

کشیدن جسم

اولین کاری که باید انجام دهیم این است که HTML خود را بسازیم. ما div ها را با ویژگی draggable قابل کشیدن می کنیم، مانند:

<div id="boxA" draggable="true"></div>

وقتی این کار انجام شد باید تابع جاوا اسکریپت را تعریف کنیم که وقتی شروع به کشیدن این عنصر می کنیم اجرا می شود:

function dragStart(ev) {
 ev.dataTransfer.effectAllowed='move';
 ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); ev.dataTransfer.setDragImage(ev.target,100,100);
 return true;
}

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

انداختن جسم

برای اینکه یک عنصر افت را بپذیرد، باید به 3 رویداد مختلف گوش دهد: dragEnter، dragOver و همچنین رها کردن رویداد پس بیایید این را با شناسه big به html خود در div اضافه کنیم:

<div id="big" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>

اکنون که شنوندگان رویداد را اضافه کرده‌ایم، باید این توابع را ایجاد کنیم، با رویدادهای dragenter و dragover شروع می‌کنیم:

function dragEnter(ev) {
 ev.preventDefault();
 return true;
}
function dragOver(ev) {
 ev.preventDefault();
}

در اولین تابع تعریف می کنیم وقتی عنصری که می کشیم به عنصری که قرار است در آن ریخته شود، چه اتفاقی بیفتد، در این حالت ما فقط از رفتار پیش فرض مرورگر جلوگیری می کنیم، اما شما می توانید چندین کار مانند تغییر پس زمینه یا اضافه کردن متنی برای نشان دادن اینکه کاربر در حال کشیدن به ناحیه درست است و با استفاده از رویداد dragleave می توانید تغییراتی را که ایجاد کرده اید برگردانید. بعدی در dragOver تابع ما به سادگی از پیش فرض جلوگیری می کنیم تا اجازه افت را بدهد.

قسمت بعدی جایی است که ما تابع را برای زمانی که واقعا عنصر را رها می کنیم تعریف می کنیم روی هدف مورد نظر:

function dragDrop(ev) {
 var data = ev.dataTransfer.getData("Text");
 ev.target.appendChild(document.getElementById(data));
 ev.stopPropagation();
 return false;
}

در این قسمت آخر، ابتدا متغیری به نام داده را تنظیم می کنیم که در آن تمام داده های موجود برای قالب متن را دریافت می کنیم و سپس آن داده را (که عنصری است که می کشیم) به div که می خواهیم در آن رها کنیم اضافه می کنیم. عنصر. در نهایت برخی از اقدامات نهایی مانند توقف انتشار و همچنین بازگشت نادرست.

ساختن بخش به یک هدف کاهشی

چک کردن نسخه ی نمایشی، می بینید که ما همچنین مطمئن شدیم که دو div می توانند به مکان اصلی خود بازگردند. خوشبختانه، اضافه کردن یک هدف دیگر ممکن است ساده‌تر از آن چیزی باشد که فکر می‌کنید. از آنجایی که توابع از قبل در جای خود هستند، تنها کاری که باید انجام دهیم این است که شنوندگان رویداد را اضافه کنیم، مانند:

<section id="section" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">

و این تنها چیزی است که ما نیاز داریم تا بتوانیم دیوها را به محل اصلی بکشیم.

نتیجه

بسیاری از برنامه‌های کاربردی کشیدن و رها کردن با استفاده از کتابخانه‌های جاوا اسکریپت ساخته شده‌اند، و اغلب استفاده از آن کتابخانه‌ها ساده‌تر است. اما امیدوارم که در این تکنیک HTML5 و جاوا اسکریپت، پتانسیل آینده راه حل بومی را ببینید.

آیا یک رابط کشیدن و رها کردن ساخته اید؟ چگونه HTML5 بومی با راه حل های جاوا اسکریپت خالص مقایسه می شود؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، رها کردن تصویر از طریق photophilde.