JSFiddle - React, Tailwind, and code Playground

HTML

<div id="area1" contenteditable="true">
      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.
    </div>
    
    <section id="section">
      <span class="button" draggable="true" id="variable" contenteditable="false">
        Variable
      </span>
    </section>

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: 200px;
      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 variable = document.getElementById('variable');
    variable.addEventListener("dragstart", handleDragStart, false)
    
    var area1 = document.getElementById("area1"); 
    area1.addEventListener("dragenter", handleDragEnter, false);
    area1.addEventListener("dragover", handleDragOver, false);
    area1.addEventListener("dragleave", handleDragLeave, false);
    area1.addEventListener('drop', handleDrop, false);
    area1.addEventListener('dragend', handleDragEnd, false);
    
    function handleDragStart(e) {
      this.style.opacity = '0.4';  // this / e.target is the source node.
      dragSrcEl = this;
    
      e.dataTransfer.effectAllowed = 'move';
      e.dataTransfer.setData('text', '{/'+this.id+'/}');
    }
    
    function handleDragOver(e) {
      if (e.preventDefault) {
        e.preventDefault(); // Necessary. Allows us to drop.
      }
    
      e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.
    
      return false;
    }
    
    function handleDragEnter(e) {
      // this / e.target is the current hover target.
      this.classList.add('over');
    }
    
    function handleDragLeave(e) {
      this.classList.remove('over');  // this / e.target is previous target element.
    }
    
    function handleDrop(e) {
        e.preventDefault();
        var dragged_item=e.dataTransfer.getData("text");
        e.target.appendChild(document.getElementById('variable'));
        
        alert('Do something else');
    }
    
    function handleDragEnd(e) {
        // this/e.target is the source node.
        $('#area1').removeClass('over');
    }