How to show droppable area using Drag and Drop HTML API

Question

I'm implementing a functionality where the user can sort the list and re-order the elements, on dragover I want to show the droppable area below the dragover element.

Note: I want to achieve this using native javascript

Answer 1

Without seeing your code I can't suggest an exact implementation but you can use JS to inject a "placeholder" element.

First, you'll need to know the position of all your items, maybe use an array to log the order of your list items.

Next, on dragover append the placeholder element in the place of where the dragged item you are moving is located on the list. For example, if you have a list like:

ITEM 1
ITEM 2
ITEM 3
ITEM 4

When you drag ITEM 4 over ITEM 3 then inject the placeholder after ITEM 2 so it appears between ITEM 2 and 3. When you drop ITEM 3, you can remove the placeholder.

Note, you'll also have to remove the injected placeholder as you move further up/down the list. Otherwise, you'll end up with multiple placeholders.

There are also plugins available for this such as HTML5 Sortable and SortableJS