JavaScript Academy · Lesson

Visual Feedback During Drag

Style elements during drag operations.

Visual Feedback During Drag is a free JavaScript Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Visual Feedback Matters

Good drag-and-drop tells the user what is happening: which item is moving, where it can land, and whether a drop is valid. Without feedback the interaction feels broken.

Styling the Dragged Item

Dim or scale the source on dragstart so the user sees what they picked up.

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

The dragenter Event

dragenter fires when the dragged item enters a potential target. Use it to highlight the zone.

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

The dragleave Event

dragleave fires when the item leaves the target. Remove the highlight here.

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

The Flicker Problem

dragenter/dragleave fire for child elements too, causing flicker. A counter or relatedTarget check keeps the highlight stable.

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

Resetting on Drop

Always clear highlight state in the drop handler, since dragleave may not fire on a successful drop.

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

Customizing the Drag Image

setDragImage(element, offsetX, offsetY) in dragstart replaces the default ghost with any element.

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

Cursor via dropEffect

The cursor (copy plus-sign, move arrow, no-drop) is driven by dropEffect, set on dragover. Reject invalid drops with "none".

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

Showing a Drop Placeholder

In sortable lists, insert a placeholder element at the projected drop position so users see exactly where the item will land.

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

Computing Insert Position

Compare the pointer Y against each item's vertical midpoint to decide whether to drop before or after it.

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;
  });
}

Accessible Feedback

Visual cues alone exclude keyboard and screen-reader users. Pair drag-and-drop with ARIA live announcements and a keyboard alternative for accessibility.

Quick Check

Test visual feedback.

Recap: Visual Feedback

You styled the dragged item, highlighted zones with dragenter/dragleave, solved the flicker with a depth counter, customized the drag image, controlled the cursor via dropEffect, and showed drop placeholders. Next: dragging files in.

Frequently asked questions

Is the “Visual Feedback During Drag” lesson free?

Yes — the full text of “Visual Feedback During Drag” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Visual Feedback During Drag”?

Style elements during drag operations. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Visual Feedback During Drag” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy