JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Start dragging an item and attempt to use scroll wheel to drop at the bottom of the list</h2>
<div class="item" draggable="true">Item1</div>
<div class="item" draggable="true">Item2</div>
<div class="item" draggable="true">Item3</div>
<div class="item" draggable="true">Item4</div>
<div class="item" draggable="true">Item5</div>
<div class="item" draggable="true">Item6</div>
<div class="item" draggable="true">Item7</div>
<div class="item" draggable="true">Item8</div>
<div class="item" draggable="true">Item9</div>
<div class="item" draggable="true">Item10</div>
<div class="item" draggable="true">Item1</div>
<div class="item" draggable="true">Item2</div>
<div class="item" draggable="true">Item3</div>
<div class="item" draggable="true">Item4</div>
<div class="item" draggable="true">Item5</div>
<div class="item" draggable="true">Item6</div>
<div class="item" draggable="true">Item7</div>
<div class="item" draggable="true">Item8</div>
<div class="item" draggable="true">Item9</div>
<div class="item" draggable="true">Item10</div>

CSS

.item {
    height: 50px;
    background: red;
    margin: 10px 0;
}

JavaScript

var $dragging = null;
$('.item').bind('dragstart', function(e) {
    $dragging = $(e.currentTarget)
});

$('.item').bind('dragover', function(e) {
    e.preventDefault();
    e.stopPropagation();
});

$('.item').bind('drop', function(e) {
    e.preventDefault();
    e.stopPropagation();
    
    $dragging.unbind();
    $dragging.insertBefore($(e.currentTarget));
});