یک رابط کشیدن و رها کردن بسازید که کاربر بتواند آیتم‌های قابل‌کشیدن را از یک لیست به یک ناحیه هدف منتقل کند و پس از رها کردن هر آیتم، تعداد آیتم‌های داخل ناحیه هدف نمایش داده شود.

برای حل این مسئله از HTML/CSS برای نمایش لیست و ناحیه هدف و از JavaScript و API کشیدن و رها کردن HTML5 استفاده کنید: به عناصر قابل‌کشیدن صفت draggable="true" بدهید، در رویداد dragstart از e.dataTransfer.setData برای نگهداری شناسه آیتم استفاده کنید، در dragover از e.preventDefault() برای اجازه دادن به رها شدن استفاده کنید و در drop با e.dataTransfer.getData شناسه را گرفته و عنصر را به ناحیه هدف appendChild کنید؛ سپس با بررسی تعداد فرزندان یا شمارنده داخلی متن شمارش را به‌روزرسانی کنید. نکات مفید: از کلاس‌های CSS برای نمایش بازخورد بصری در dragenter/dragleave استفاده کنید، نوع داده 'text/plain' را به کار ببرید و اطمینان حاصل کنید که شناسه‌ها یکتا هستند.