JSFiddle - React, Tailwind, and code Playground

HTML

<div id="drag" draggable="true">
    Drag this div <br />
   <input id="message" type="text" value="Try and selecting me in firefox. Or try to put the cursor in the middle." style="width: 100%" />
</div>
<div id="drop">
    Drop area
</div>

JavaScript

$('#drag').on('dragstart', function(e){
    e.originalEvent.dataTransfer.setData('Text', $('#message').val());
    e.originalEvent.dataTransfer.effectAllowed = 'move';
});

var drop = $('#drop');
drop.on('dragover', function(e){
    e.preventDefault();
});
drop.on('dragenter', function(e){
    e.preventDefault();
});
drop.on('drop', function(e){
    alert('Target succesfully dropped: ' + e.originalEvent.dataTransfer.getData('Text'));
    e.preventDefault();
});