JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<div id="divFields">
    <ul>
        <li>Texto  1</li>
        <li>Texto 2</li>
        <li>Texto 3</li>
    </ul>
</div>
<div id="divDroppedFields" class="ui-widget-content">
    <textarea id="txtMessageFields" rows="4" cols="50"></textarea>
</div>

CSS

#divFields
{ 
    margin-right: 2em;
}
#txtMessageFields
{
    margin: 0;  
    font-weight:bold;
    font-size:14px;
    
}

JavaScript

$(document).ready(initialize);

function initialize() {
    
    $("#divFields li").draggable({
        helper: "clone"
    });


    $("#divDroppedFields").droppable({
        accept: "#divFields li",
        drop: function (event, ui) {
             var texto = $(this).find('#txtMessageFields').val();
            $(this).find('#txtMessageFields').val((texto + ui.draggable.text()));
        }

    });
}