JSFiddle - React, Tailwind, and code Playground

HTML

<div id="draggerContainer" droppable="true">
<div class="draggableItem" draggable="true" data-id="001">[... Stuff inside like  and other  ...] </div>
<div class="draggableItem" draggable="true" data-id="002">[... Stuff inside like  and other  ...] </div>
<div class="draggableItem" draggable="true" data-id="003">[... Stuff inside like  and other  ...] </div>
<div class="draggableItem" draggable="true" data-id="004">[... Stuff inside like  and other  ...] </div>
<div class="draggableItem" draggable="true" data-id="005">[... Stuff inside like  and other  ...] </div>
<div class="draggableItem" draggable="true" data-id="006">[... Stuff inside like  and other  ...] </div>
<div class="draggableItem" draggable="true" data-id="007">[... Stuff inside like  and other  ...] </div>
<div class="draggableItem" draggable="true" data-id="008">[... Stuff inside like  and other  ...] </div>
<div class="draggableItem" draggable="true" data-id="009">[... Stuff inside like  and other  ...] </div>
</div>

JavaScript

$.event.props.push("dataTransfer");

$("#draggerContainer .draggableItem").each(function() {
    $(this).append($(this).data("id"));
});

$("#draggerContainer")
    .on("dragstart", ".draggableItem", function(e) {
        e.dataTransfer.setData("id", $(this).data("id"));
    })
    .on("dragover", ".draggableItem", function(e) {
        e.preventDefault();
    })
    .on("drop", ".draggableItem", function(e) {
        var id = e.dataTransfer.getData("id");
        
        var $draggingElem = $(".draggableItem").filter(function() {
            return $(this).data("id") === id;
        });
        
        var indexDrag = $draggingElem.index();
        var indexThis = $(this).index();
        if(indexDrag < indexThis) {
            $draggingElem.insertAfter(this);
        } else if(indexDrag > indexThis) {
            $draggingElem.insertBefore(this);
        }
    });