در حال بارگذاری...
Drag and Drop HTML
HTML با draggable میکشد؛ JS معنای drop را تعریف میکند.
پاسخ مستقیم
draggable="true", dragstart, 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
- بکش به zone
- استایل
- جایگزین keyboard
اشتباهات آسان
- preventDefault فراموش
- فقط DnD
- DnD غیرضروری
خلاصه
- draggable
- JS drop
- dragover preventDefault
- جایگزین a11y
🧠 دانش خود را بیازمایید
آماده شروع
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کردهاید
3
سوالات
70%
برای قبولی
∞
زمان
∞
تلاشها
📝 دستورالعملها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- میتوانید آزمون را هر چند بار که میخواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده میشود