JSFiddle - React, Tailwind, and code Playground

HTML

<div class="NewsItemDraggable" style="margin-top: 5px">
    Some html stuff here
</div>
    <div class="RelatedNewsDropDiv">
        Drop Related News Items Here
    </div>

<div class="NewsItemDraggable" style="margin-top: 5px">
    Some html stuff here
</div>    
    <div class="RelatedNewsDropDiv">
        Drop Related News Items Here
    </div>

<div class="NewsItemDraggable" style="margin-top: 5px">
    Some html stuff here
</div>    
    <div class="RelatedNewsDropDiv">
        Drop Related News Items Here
    </div>


<div class="abc" style="margin-top: 5px">
    <u>Try to drop Items in below Div </u>
    <ul>
<li class="NewsItemDraggable" id="Li1">Item1</li>
<li class="NewsItemDraggable" id="Li2">Item2</li>
<li class="NewsItemDraggable" id="Li3">Item3</li>
<li class="NewsItemDraggable" id="Li4">Item4</li>
</ul>
</div>


    <div class="RelatedNewsDropDiv">
        Drop Related News Items Here
    </div>

JavaScript

$(document).ready(function () {
    $(".NewsItemDraggable").draggable({ helper: 'clone' });
    $(".RelatedNewsDropDiv").droppable({
        accept: ".NewsItemDraggable",
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function (event, ui) {
            AddReletedNewsItem(ui.draggable, $(this));
        }
    });
    function AddReletedNewsItem($draggedItem, $dropArea) {                
        var $list = $("ul", $dropArea).length ?
                    $("ul", $dropArea) :
                    $("<ul/>");
        $dropArea.append($draggedItem);
    }
});