JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="field_source">
    <li><span>some text</span></li>
    <li><span>some other text</span></li>
 </ul>

<input type="text" class="connectColumn" />
<input type="text" class="connectColumn" />

JavaScript

$( ".connectColumn" ).droppable({
    accept: "#field_source li span",
    drop: function( event, ui ) {
       $(event.target).val(ui.draggable.text());
      }
});
$( "#field_source li span" ).draggable({ 
    revert: "valid" 
});