JSFiddle - React, Tailwind, and code Playground

HTML

<div id="boxA">
       <div id="word1" class="word" draggable="true">HTML5</div>
       <div id="word2" class="word" draggable="true">is</div>
       <div id="word3" class="word" draggable="true">very</div>
       <div id="word4" class="word" draggable="true">useful</div>
       <div id="word5" class="word" draggable="true">indeed</div>
    </div>
    <div id="boxB"></div>

CSS

#boxB {
        width: 100%;
        height: 100px;
        background: #ccc;
        margin-top: 20px;
    }
    
    .word {
        padding: 5px;
        margin-bottom: 5px;
        width: 100%;
        background: lightgrey;
    }

JavaScript

$('.word').on('dragstart', dragDefine);
    $('#boxA').on('dragover', dragOver);
    $('#boxA').on('drop', dragDrop);
    $('#boxB').on('dragover', dragOver);
    $('#boxB').on('drop', dragDrop);
    
    function dragDefine(ev) {
       ev.originalEvent.dataTransfer.effectAllowed = 'move';
       ev.originalEvent.dataTransfer.setData("text/plain", ev.target.getAttribute('id'));
       ev.originalEvent.dataTransfer.setDragImage(ev.target, 0, 0);
       return true;
    }
    
    function dragOver(ev) {
       ev.preventDefault();
    }
    
    function dragDrop(ev) {
       var idDrag = ev.originalEvent.dataTransfer.getData("Text");
       ev.target.appendChild(document.getElementById(idDrag));
       ev.preventDefault();
    }