نحوه استفاده از HTML Drag and Drop API

پیاده سازی قابلیت کشیدن و رها کردن ساده تر از آن چیزی است که فکر می کنید. چگونه در این راهنمای مفید بیاموزید.

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

اصول کشیدن و رها کردن در HTML

در یک سیستم کشیدن و رها کردن معمولی، دو نوع عنصر وجود دارد: نوع اول شامل عناصر قابل کشیدنی است که کاربران می توانند با ماوس حرکت دهند، و نوع دوم شامل عناصر قابل رها کردن است که به طور معمول مشخص می کند که کاربران می توانند یک عنصر را در کجا قرار دهند.

برای اجرای کشیدن و رها کردن، باید به مرورگر بگویید که چه عناصری را می‌خواهید قابل کشیدن باشند. برای اینکه یک عنصر توسط کاربر قابل کشیدن باشد، آن عنصر باید دارای یک ویژگی HTML قابل کشیدن باشد که روی true تنظیم شده است، مانند این:

<div draggable="true">This element is draggable</div>

هنگامی که کاربر شروع به اجرای یک رویداد کشیدن می کند، مرورگر یک تصویر “شبح” پیش فرض را ارائه می دهد که معمولاً بازخوردی را در مورد عنصری که در حال کشیدن است ارائه می دهد.

شما می توانید این تصویر را با ارائه تصویر خود به جای آن سفارشی کنید. برای انجام این کار، عنصر قابل کشیدن را از DOM انتخاب کنید، یک تصویر جدید برای نمایش تصویر بازخورد سفارشی ایجاد کنید و یک شنونده رویداد dragstart مانند این اضافه کنید:

let img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png';

document.querySelector('div').addEventListener('dragstart', (event)=>{
    event.dataTransfer.setDragImage(img, 10, 10);
})

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

اگر می‌خواهید اجازه افت بدهید، باید با لغو هر دو رویداد dragenter و dragover از رفتار پیش‌فرض جلوگیری کنید، مانند این:

const dropElement = document.querySelector("drop-target");

dropElement.addEventListener("dragenter", (ev) => {
  ev.preventDefault();
});

dropElement.addEventListener("dragover", (ev) => {
  ev.preventDefault();
});

درک رابط DragEvent

جاوا اسکریپت دارای یک رابط DragEvent است که نشان دهنده تعامل کشیدن و رها کردن کاربر است. در زیر لیستی از انواع رویدادهای احتمالی در رابط DragEvent آمده است.

• کشیدن: کاربر این رویداد را در حین کشیدن یک عنصر فعال می کند.
• dragend: این رویداد زمانی فعال می شود که عملیات کشیدن به پایان می رسد یا زمانی که کاربر آن را قطع می کند. یک عملیات کشیدن معمولی می تواند با رها کردن دکمه ماوس یا فشار دادن کلید فرار به پایان برسد.
• dragenter: یک عنصر کشیده شده زمانی که وارد یک هدف دراپ معتبر می شود، این رویداد را راه اندازی می کند.
• dragleave: هنگامی که عنصر کشیده شده از یک هدف دراپ خارج می شود، این رویداد شلیک می شود.
• dragover: وقتی کاربر یک عنصر قابل کشیدن را روی یک هدف دراپ می‌کشد، رویداد فعال می‌شود.
• dragstart: رویداد در شروع یک عملیات کشیدن فعال می شود.
• drop: زمانی که کاربر یک عنصر را روی یک هدف دراپ می‌اندازد، این رویداد را راه‌اندازی می‌کند.

هنگام کشیدن یک فایل به داخل مرورگر از محیطی خارج از مرورگر (به عنوان مثال، مدیر فایل سیستم عامل)، مرورگر رویدادهای dragstart یا dragend را فعال نمی کند.

اگر می خواهید یک رویداد کشیدن سفارشی را به صورت برنامه ریزی شده ارسال کنید، DragEvent می تواند مفید باشد. به عنوان مثال، اگر می‌خواهید یک div رویدادهای کشیدن سفارشی را در بارگذاری صفحه فعال کند، در اینجا نحوه انجام این کار آمده است. ابتدا یک DragEvent() سفارشی جدید مانند این ایجاد کنید:

const customDragStartEvent = new DragEvent('dragstart', {
    dataTransfer: new DataTransfer(),
})

const customDragEndEvent = new DragEvent('dragend');

در بلوک کد بالا، customDragStartEvent نمونه ای از DragEvent() را نشان می دهد. در customDragStartEvent، دو آرگومان سازنده وجود دارد. اولین نشان دهنده نوع رویداد کشیدن است، که می تواند یکی از هفت نوع رویداد ذکر شده در بالا باشد.

آرگومان دوم یک شی با یک کلید dataTransfer است که نمونه ای از DataTransfer را نشان می دهد، که در ادامه در این راهنما با آن بیشتر آشنا خواهید شد. سپس، عنصری را که می‌خواهید رویداد را از آن راه‌اندازی کنید، از Document Object Model (DOM) بگیرید.

const draggableElement = document.querySelector("#draggable");

سپس شنوندگان رویداد را به این شکل اضافه کنید:

  draggableElement.addEventListener('dragstart', (event) => {
    console.log('Drag started!');
    event.dataTransfer.setData('text/plain', 'Hello, world!'); 
  });

  draggableElement.addEventListener('dragend', () => {
    console.log('Drag ended!');
  });

در اولین شنونده رویداد بالا، ویژگی تابع callback متن را ثبت می کند، “کشیدن شروع شد!” و متد setData را در ویژگی dataTransfer روی شی رویداد فراخوانی می کند. اکنون، می توانید رویدادهای سفارشی را مانند این راه اندازی کنید:

draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);

انتقال داده با انتقال داده

شی dataTransfer به عنوان پلی بین عنصر منبع (مورد قابل کشیدن) و عنصر هدف (ناحیه قابل رها کردن) در طول عملیات کشیدن و رها کردن عمل می کند. به عنوان یک محفظه ذخیره موقت برای داده هایی که می خواهید بین این عناصر به اشتراک بگذارید عمل می کند.

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

استفاده از setData() برای داده های بسته

برای انتقال داده ها از یک عنصر قابل کشیدن به یک عنصر droppable، از متد setData() ارائه شده توسط شی dataTransfer استفاده خواهید کرد. این روش به شما امکان می دهد داده هایی را که می خواهید انتقال دهید بسته بندی کنید و نوع داده را مشخص کنید. در اینجا یک مثال اساسی است:

element.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text/plain', 'Hello, world!');
});

هنگامی که کاربر شروع به کشیدن عنصر مشخص شده می کند، setData() متن “Hello, world!” با نوع داده text/plain. این داده ها اکنون با رویداد کشیدن مرتبط هستند و می توانند توسط هدف droppable در طول عملیات رها کردن به آنها دسترسی داشته باشند.

بازیابی داده ها با getData()

در انتهای گیرنده، در شنونده رویداد یک عنصر droppable، می توانید داده های منتقل شده را با استفاده از متد getData() بازیابی کنید:

element.addEventListener('drop', (event) => {
  const transferredData = event.dataTransfer.getData('text/plain');
  console.log(`Received data: ${transferredData}`);
});

بلوک کد بالا داده‌ها را با همان نوع داده (متن/ساده) که قبلاً با استفاده از متد setData () تنظیم شده بود، بازیابی می‌کند. این به شما امکان می دهد به داده های منتقل شده در چارچوب عنصر droppable دسترسی داشته باشید و آن را دستکاری کنید.

از Cases برای کشیدن و رها کردن رابط ها استفاده کنید

ادغام قابلیت کشیدن و رها کردن در برنامه های کاربردی وب شما می تواند یک پیشرفت قدرتمند باشد، اما درک اینکه چه زمانی و چرا باید آن را پیاده سازی کنید ضروری است.

• آپلودکنندگان فایل: به کاربران اجازه می‌دهد فایل‌ها را مستقیماً از دسک‌تاپ یا مدیر فایل خود به یک ناحیه دراپ تعیین‌شده بکشند، فرآیند آپلود را ساده می‌کند.
• فهرست‌های قابل مرتب‌سازی: اگر برنامه شما شامل فهرست‌هایی از آیتم‌ها، مانند فهرست‌های کار، فهرست‌های پخش، یا گالری‌های تصویر باشد، کاربران ممکن است از توانایی مرتب کردن مجدد موارد از طریق کشیدن و رها کردن قدردانی کنند.
• داشبوردهای تعاملی: برای تجسم داده ها و ابزارهای گزارش، کشیدن و رها کردن می تواند راهی قدرتمند برای کاربران باشد تا داشبورد خود را با مرتب کردن مجدد ویجت ها و نمودارها سفارشی کنند.

در ذهن داشتن قابلیت دسترسی

در حالی که کشیدن و رها کردن می‌تواند از نظر بصری جذاب باشد و تجربه کاربر را افزایش دهد، اطمینان از اینکه پیاده‌سازی شما برای همه کاربران، از جمله افراد دارای معلولیت، قابل دسترسی است، بسیار مهم است. روش‌های جایگزین برای تعامل، مانند کنترل‌های صفحه‌کلید، برای فراگیر کردن برنامه‌تان ارائه کنید.

منبع مقاله