JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  Lorem lean startup ipsum product market fit customer development acquihire technical cofounder.
</p>
<p>
    <textarea style="width:100%;" rows="4">Lorem lean startup ipsum product market fit customer development acquihire technical cofounder.</textarea>
</p>

<div class="dropzone">Hier markierten Text hinziehen!</div>

CSS

.dropzone {
  text-align: center;
  background: #EEE;
  border: 0.2em solid #000;
  padding: 3em;
  margin: 0.5em 0;
}

.dropzone.valid {
  background: #EFE;
  border: 0.2em solid #0F0;
}

JavaScript

$('.dropzone').on('dragover', function(evt){
  evt.preventDefault();
});

$('.dropzone').on('dragenter', function(evt){
  evt.preventDefault();
  $(this).addClass('valid');
});

$('.dropzone').on('dragleave', function(){
  $(this).removeClass('valid');
});

$('.dropzone').on('dragstart', function(evt){
  //evt.originalEvent.dataTransfer.setData('text', '');
  evt.originalEvent.dataTransfer.effectAllowed = 'copyMove';
});

$('.dropzone').on('drop', function(evt){
  evt.preventDefault();
  $(this).removeClass('valid');
  window.alert(evt.originalEvent.dataTransfer.dropEffect);
});