JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="area1">
      Phasellus at libero lectus. Morbi pulvinar, augue non tincidunt consequat, mi turpis rhoncus urna, faucibus blandit
      quam lacus aliquet arcu.<br><br>Pellentesque in congue nulla. Vestibulum posuere ligula eget dui mollis aliquet. Fusce euismod
      nisl justo, eu sagittis ipsum facilisis a. Maecenas vel congue augue, sed bibendum sapien. Donec id semper enim, quis
      placerat ipsum.<br><br>
      Vestibulum non mauris a nisi dictum sodales. Cras gravida, felis a sagittis dapibus, massa ipsum pretium purus, in
      semper enim metus ac urna. Mauris bibendum metus ut lacus tristique pulvinar. Fusce viverra lorem quis consectetur
      volutpat. Donec elementum at orci vel auctor. Suspendisse sed fringilla sapien. Proin velit erat, dapibus nec nisl
      at, interdum tempus diam.
    </textarea>
    
    <a href="#" class="button" id="variable" contenteditable="false">
      Variable
    </a>

CSS

[draggable] {
      -moz-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      user-select: none;
      /* Required to make elements draggable in old WebKit */
      -khtml-user-drag: element;
      -webkit-user-drag: element;
    }
    .button {
      padding: 4px 12px;
      text-align: center;
      vertical-align: middle !important;
      background-color: #d9d9d9;
      border: 1px transparent solid;
      color: #222222;
      border-radius: 0;
      cursor: pointer;
      display: inline-block;
      outline: none;
      font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif;
      font-size: 14px;
      line-height: 16px;
      margin: auto;
    }
    #area1, #area2 {
      width: 300px;
      height: 400px;
      float: right;
      border: 1px solid #909090;
      -webkit-user-drop: element;
    }
    section {
      width:15%;
      min-height: 300px;
      float:right;
      margin:5px;
        position: fixed;
    }
    #variable {
      -webkit-user-drag: element;
      -webkit-user-select: none;
    }

JavaScript

var area1 = document.getElementById("area1"); 
      area1.addEventListener('drop', handleDrop, false);
    
    function handleDrop(event) {
      event.preventDefault();
        //I can make a window pop up with an input
        //and use that text in the insert function
      alert('Use a window pop up, returning the input text');
      if (event.dataTransfer) {
        var format = "Text/html";
        var textData = event.dataTransfer.getData (format);
        if (!textData) {
          textData = "<span style='color:red'>The data transfer contains no text data.</span>";
        }
        var textObj = document.getElementById('area1');
        insert(textObj, 'the inserted text from the window');
      }
      else {
        alert ("Your browser does not support the dataTransfer object.");
      }
      
      if (event.stopPropagation) {
        event.stopPropagation ();
      }
      else {
        event.cancelBubble = true;
      }
      return false;
    }
    
    function insert(el,text) {
      var val = el.value , endIndex, range, doc = el.ownerDocument;
      if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
          endIndex = el.selectionEnd;
          el.value = val.slice(0, endIndex) + text + val.slice(endIndex);
          el.selectionStart = el.selectionEnd = endIndex + text.length;
      } else if (doc.selection != "undefined" && doc.selection.createRange) {
          el.focus();
          range = doc.selection.createRange();
          range.collapse(false);
          range.text = text;
          range.select();
      }
    }