Drag و Drop در HTML5
رابط برنامه‌نویسی Drag و Drop در HTML5 مجموعه‌ای از رویدادها و ویژگی‌ها است که به شما اجازه می‌دهد عناصر را در صفحه وب بکشید و رها کنید. این API برای افزودن قابلیت‌های تعاملی مانند کشیدن تصاویر، فایل‌ها یا حتی عناصر HTML سفارشی برای مرتب‌سازی آیتم‌ها، آپلود فایل‌ها و ایجاد رابط‌های کشیدن و رها کردن مفید است.
مفاهیم کلیدی در رابط Drag و Drop در HTML
- ویژگی Draggable:
- هر عنصر HTML می‌تواند با استفاده از ویژگی
draggable="true"قابل کشیدن شود.
- هر عنصر HTML می‌تواند با استفاده از ویژگی
- رویدادها:
dragstart: وقتی عمل کشیدن شروع می‌شود فراخوانی می‌شود. معمولاً برای تنظیم داده‌های کشیده شده استفاده می‌شود.drag: به صورت پیوسته در طول کشیدن عنصر فعال می‌شود.dragend: وقتی عمل کشیدن به پایان می‌رسد (رها کردن)، این رویداد فعال می‌شود.dragenter: زمانی که یک عنصر قابل کشیدن وارد یک ناحیه معتبر برای رها کردن می‌شود.dragover: تا زمانی که عنصر در حال کشیدن روی ناحیه رها کردن قرار دارد، این رویداد فعال است.dragleave: وقتی عنصر قابل کشیدن ناحیه رها کردن را ترک می‌کند.drop: زمانی که عنصر در ناحیه معتبر رها می‌شود، این رویداد فعال می‌شود.
- شیء DataTransfer:
- شیء
DataTransferبرای نگهداری داده‌ای که در حال کشیدن است استفاده می‌شود. می‌توانید داده را در رویدادdragstartتنظیم کنید و سپس در رویدادdropآن را بازیابی کنید.
- شیء
نمونه‌ای ساده از Drag و Drop
کد زیر مثالی ساده است که در آن یک عنصر را می‌توان به یک ناحیه تعیین‌شده برای رها کردن کشید.
<DOCTYPE html!>
<“html lang=“en>
<head>
<“meta charset=“UTF-8>
<“meta name=“viewport” content=“width=device-width, initial-scale=1.0>
<title>Drag and Drop API Example</title>
<style>
} draggable.
;width: 100px
;height: 100px
;background-color: #4CAF50
;color: white
;text-align: center
;line-height: 100px
;margin: 10px
;cursor: move
{
} dropzone.
;width: 200px
;height: 200px
;background-color: #f2f2f2
;border: 2px dashed #999
;text-align: center
;line-height: 200px
;margin-top: 20px
{
<style/>
<head/>
<body>
<div id=“draggable” class=“draggable” draggable=“true”>Drag me</div>
<div id=“dropzone” class=“dropzone”>Drop here</div>
<script>
Select elements//
;const draggable = document.getElementById(‘draggable’)
;const dropzone = document.getElementById(‘dropzone’)
Event listeners for dragging//
} <=draggable.addEventListener(‘dragstart’, (event)
;event.dataTransfer.setData(‘text/plain’, draggable.id)
;‘event.target.style.opacity = ‘0.5
;({
} <=draggable.addEventListener(‘dragend’, (event)
;‘event.target.style.opacity = ‘1
;({
Event listeners for dropzone//
} <=dropzone.addEventListener(‘dragover’, (event)
;()event.preventDefault
;({
} <=dropzone.addEventListener(‘drop’, (event)
;()event.preventDefault
;const data = event.dataTransfer.getData(‘text’)
;const draggedElement = document.getElementById(data)
;dropzone.appendChild(draggedElement)
;alert(‘Dropped successfully!’)
;({
<script/>
<body/>
<html/>
توضیح کد:
- عنصر draggable:
<div>با کلاسdraggableدارای ویژگیdraggable="true"است و اجازه کشیدن آن داده شده. - رویدادهای کشیدن:
dragstart: شناسه عنصر در شیءDataTransferذخیره می‌شود.dragend: سبک عنصر پس از کشیدن بازنشانی می‌شود.
- رویدادهای رها کردن:
dragover: اجازه می‌دهد ناحیه رها کردن، عنصر را بپذیرد با استفاده ازevent.preventDefault().drop: شناسه عنصر کشیده‌شده را بازیابی کرده و آن را به ناحیه رها کردن اضافه می‌کند.
این مثال پیاده‌سازی ساده‌ای از HTML Drag و Drop API را نشان می‌دهد که برای طیف گسترده‌ای از کاربردها مناسب است.
دیدگاهتان را بنویسید