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

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

الأحداث الأساسية للسحب والإفلات ​

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

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

​

مثال عملي بسيط ​

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 فقط، ممكن تعمل سحب وإفلات لأي عناصر في الصفحة، سواء كانت صور، بطاقات، أو عناصر نصية، وتضيف تجربة تفاعلية ممتعة للمستخدمين.

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