تصميم سحب وإفلات بالعناصر بالجافا سكريبت

تصميم واجهة سحب وإفلات (Drag & Drop) بيضيف تفاعل ممتع وسلس للمستخدمين. باستخدام JavaScript فقط، ممكن تنقل العناصر بين مناطق مختلفة داخل الصفحة بسهولة وفاعلية. 💻✨

1️⃣ الأحداث الأساسية للسحب والإفلات 🛠️​

لتطبيق هذه الخاصية، هتستخدم الأحداث التالية:

• dragstart 🏁: يبدأ المستخدم بسحب العنصر.
• dragover 🔄: العنصر يتم سحبه فوق منطقة معينة.
• drop 📥: يسقط العنصر في المنطقة المستهدفة.

2️⃣ مثال عملي بسيط 🔧​

const draggable = document.querySelector('.draggable');
const dropZone = document.querySelector('.drop-zone');

draggable.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', e.target.id);
});

dropZone.addEventListener('dragover', (e) => {
    e.preventDefault(); // السماح بالإفلات
});

dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
const id = e.dataTransfer.getData('text');
const element = document.getElementById(id);
dropZone.appendChild(element);
});

• العنصر اللي هيتسحب لازم يكون draggable="true"
• المنطقة اللي هيتم الإفلات فيها تستقبل العنصر بعد preventDefault()

💡 باستخدام JavaScript فقط، ممكن تعمل سحب وإفلات لأي عناصر في الصفحة، سواء كانت صور، بطاقات، أو عناصر نصية، وتضيف تجربة تفاعلية ممتعة للمستخدمين. 🚀

👆 أضغط على الصورة لمشاهدة الفيديو 👆