التغذية المرئية الراجعة أثناء السحب

أهمية التغذية الراجعة المرئية

تنسيق العنصر المسحوب

item.addEventListener("dragstart", () => item.classList.add("is-dragging"));
item.addEventListener("dragend", () => item.classList.remove("is-dragging"));

حدث dragenter

zone.addEventListener("dragenter", (e) => {
  e.preventDefault();
  zone.classList.add("drag-over");
});

حدث dragleave

zone.addEventListener("dragleave", () => {
  zone.classList.remove("drag-over");
});

مشكلة الوميض

let depth = 0;
zone.addEventListener("dragenter", () => { depth++; zone.classList.add("drag-over"); });
zone.addEventListener("dragleave", () => { depth--; if (depth === 0) zone.classList.remove("drag-over"); });

إعادة الضبط عند الإفلات

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  depth = 0;
  zone.classList.remove("drag-over");
});

تخصيص صورة السحب

item.addEventListener("dragstart", (e) => {
  const ghost = document.getElementById("custom-ghost");
  e.dataTransfer.setDragImage(ghost, 20, 20);
});

المؤشر عبر dropEffect

zone.addEventListener("dragover", (e) => {
  e.preventDefault();
  e.dataTransfer.dropEffect = canAccept ? "move" : "none";
});

إظهار عنصر نائب للإفلات

function showPlaceholder(beforeEl) {
  list.insertBefore(placeholder, beforeEl);
}

حساب موضع الإدراج

function getAfterElement(container, y) {
  const items = [...container.querySelectorAll(".item:not(.is-dragging)")];
  return items.find((el) => {
    const box = el.getBoundingClientRect();
    return y < box.top + box.height / 2;
  });
}

التغذية الراجعة الميسّرة

تحقق سريع

مراجعة: التغذية الراجعة المرئية