آموزش Drag and Drop در HTML و JavaScript 🎯

رویدادهای Drag and Drop در جاوااسکریپت

برای اجرای Drag and Drop، چند رویداد مهم وجود دارد:

 dragstart: وقتی کشیدن عنصر آغاز می‌شود.

 dragover: وقتی عنصر در ناحیه رهاشدنی قرار دارد.

 drop: وقتی عنصر رها می‌شود.

 dragend: وقتی کشیدن به پایان می‌رسد.

ایجاد اولین مثال Drag and Drop

در این مثال، تصویری را می‌کشیم و در یک ناحیه دیگر رها می‌کنیم.

HTML:

<img id="dragItem" src="image.jpg" draggable="true">
<div id="dropZone">اینجا رها کنید</div>

CSS:

#dropZone {
    width: 200px;
    height: 200px;
    border: 2px dashed #000;
    text-align: center;
    line-height: 200px;
}

JavaScript:

const dragItem = document.getElementById("dragItem");
const dropZone = document.getElementById("dropZone");

dragItem.addEventListener("dragstart", function(event) {
    event.dataTransfer.setData("text", event.target.id);
});

dropZone.addEventListener("dragover", function(event) {
    event.preventDefault();
});

dropZone.addEventListener("drop", function(event) {
    event.preventDefault();
    const draggedElementId = event.dataTransfer.getData("text");
    const draggedElement = document.getElementById(draggedElementId);
    dropZone.appendChild(draggedElement);
});

 در این مثال:

• تصویر هنگام کشیده شدن، شناسه خود را ذخیره می‌کند.

• ناحیه Drop اجازه می‌دهد عنصر درون آن قرار گیرد.

• وقتی عنصر رها شد، به داخل ناحیه Drop اضافه می‌شود.

کشیدن و رها کردن چندین آیتم

در این مثال، چندین آیتم قابل کشیدن داریم.

HTML:

<div class="draggable" draggable="true">آیتم ۱</div>
<div class="draggable" draggable="true">آیتم ۲</div>
<div id="dropArea">اینجا رها کنید</div>

CSS:

.draggable {
    width: 100px;
    padding: 10px;
    background-color: lightblue;
    margin: 5px;
    cursor: grab;
}
#dropArea {
    width: 200px;
    height: 200px;
    border: 2px dashed #333;
}

JavaScript:

const draggableItems = document.querySelectorAll(".draggable");
const dropArea = document.getElementById("dropArea");

draggableItems.forEach(item => {
    item.addEventListener("dragstart", function(event) {
        event.dataTransfer.setData("text", event.target.id);
    });
});

dropArea.addEventListener("dragover", function(event) {
    event.preventDefault();
});

dropArea.addEventListener("drop", function(event) {
    event.preventDefault();
    const itemId = event.dataTransfer.getData("text");
    const draggedItem = document.getElementById(itemId);
    dropArea.appendChild(draggedItem);
});

 این کد امکان کشیدن چندین آیتم را فراهم می‌کند.

آپلود فایل با Drag and Drop

برای آپلود فایل با کشیدن و رها کردن:

HTML:

<div id="fileDrop">فایل خود را اینجا بکشید</div>
<input type="file" id="fileInput" hidden>

JavaScript:

const fileDrop = document.getElementById("fileDrop");
const fileInput = document.getElementById("fileInput");

fileDrop.addEventListener("dragover", function(event) {
    event.preventDefault();
});

fileDrop.addEventListener("drop", function(event) {
    event.preventDefault();
    const files = event.dataTransfer.files;
    console.log(files);
});

 این کد اجازه می‌دهد فایل‌ها مستقیماً روی صفحه کشیده و انتخاب شوند.

مرتب‌سازی لیست با Drag and Drop

برای ایجاد یک لیست که کاربران بتوانند آیتم‌های آن را جابجا کنند، می‌توان از jQuery UI استفاده کرد:

<ul id="sortable">
    <li>آیتم ۱</li>
    <li>آیتم ۲</li>
    <li>آیتم ۳</li>
</ul>

<script>
$(function() {
    $("#sortable").sortable();
});
</script>

 این ویژگی امکان مرتب‌سازی آیتم‌ها را فراهم می‌کند.

افزودن انیمیشن به Drag and Drop

برای زیباتر کردن تجربه کاربری، می‌توانیم هنگام کشیدن، افکت اضافه کنیم.

CSS:

.draggable:active {
    transform: scale(1.1);
    transition: 0.2s;
}

غیرفعال کردن Drag and Drop برای برخی عناصر

برای جلوگیری از کشیده شدن برخی آیتم‌ها، از draggable=”false” استفاده کنید:

<p draggable="false">این متن قابل کشیدن نیست</p>

بهترین روش‌ها برای پیاده‌سازی Drag and Drop

 از event.preventDefault() برای جلوگیری از رفتار پیش‌فرض مرورگر استفاده کنید.

 با استفاده از CSS، تغییرات بصری جذاب ایجاد کنید.

 برای سازگاری بهتر، از jQuery UI در پروژه‌های بزرگ‌تر استفاده کنید.

 برای پشتیبانی موبایل، از touch events نیز بهره ببرید.

 برای مرتب‌سازی لیست‌ها، از sortable استفاده کنید.

نتیجه‌گیری 

ویژگی Drag and Drop در HTML و JavaScript یکی از ابزارهای پرکاربرد برای بهبود تجربه کاربری در وب‌سایت‌ها است. با استفاده از این قابلیت، می‌توان آپلود فایل، مرتب‌سازی لیست‌ها و انتقال داده‌ها را آسان‌تر کرد.