JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="item sortable" draggable="true">Item 1</div>
    <div class="item sortable" draggable="true">Item 2</div>
    <div class="item sortable" draggable="true">Item 3</div>
</div>

CSS

.sortable {
    margin: 5px;
    padding: 10px;
    background-color: #f4f4f4;
    cursor: move;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const sortableItems = document.querySelectorAll('.sortable');

    let draggedItem = null;

    sortableItems.forEach(item => {
        item.addEventListener('dragstart', function() {
            draggedItem = this;
            setTimeout(() => this.style.display = 'none', 0);
        });

        item.addEventListener('dragend', function() {
            setTimeout(() => this.style.display = 'block', 0);
        });

        item.addEventListener('dragover', function(e) {
            e.preventDefault();
        });

        item.addEventListener('dragenter', function(e) {
            e.preventDefault();
            this.style.border = '2px dashed #000';
        });

        item.addEventListener('dragleave', function() {
            this.style.border = 'none';
        });

        item.addEventListener('drop', function() {
            if (draggedItem !== this) {
                this.parentNode.insertBefore(draggedItem, this);
                this.style.border = 'none';
            }
            draggedItem = null;
        });
    });
});