جاري التحميل...
Drag and Drop HTML
HTML draggable؛ JS drop.
إجابة مباشرة
draggable, dragover preventDefault, drop.
Minimal drag and drop
html
HTML Code
<div id="item" draggable="true" style="padding:8px;background:#cdf;width:120px;">Drag me</div>
<div id="zone" style="margin-top:12px;padding:24px;border:2px dashed #666;">Drop here</div>
<script>
const item = document.getElementById("item");
const zone = document.getElementById("zone");
item.addEventListener("dragstart", (e) => e.dataTransfer.setData("text/plain", "item"));
zone.addEventListener("dragover", (e) => e.preventDefault());
zone.addEventListener("drop", (e) => {
e.preventDefault();
zone.appendChild(item);
});
</script>جرّب بنفسك
- paste
- drag
- style
- keyboard alt
أخطاء شائعة
- no preventDefault
ملخص
- draggable
- JS
- preventDefault
- a11y
🧠 اختبر معرفتك
جاهز للبدء
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
3
الأسئلة
70%
للنجاح
∞
الوقت
∞
المحاولات
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى