JSFiddle - React, Tailwind, and code Playground

HTML

<div class="example">

  <div class="origin">

    <div id="draggable-1" class="draggable" draggable="true" ondragstart="onDragStart(event);">
      thing 1
    </div>
    
    <div id="draggable-2" class="draggable" draggable="true" ondragstart="onDragStart(event);">
      thing 2
    </div>
    
    <div id="draggable-3" class="draggable" draggable="true" ondragstart="onDragStart(event);">
      thing 3
    </div>
    
  </div>

  <div class="dropzone" ondragover="onDragOver(event);" ondrop="onDrop(event);">
  </div>
  
</div>

CSS

.example {
  display: flex;
}

.origin {
  flex-basis: 100%;
  flex-grow: 1;
  padding: 10px;
}

.draggable {
  background-color: #4AAE9B;
  font-weight: normal;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 10px;
}

.dropzone {
  background-color: #6DB65B;
  flex-basis: 100%;
  flex-grow: 1;
  padding: 10px;
}

JavaScript

function onDragStart(event) {
  event.dataTransfer.setData('text/plain', event.target.id);
  event.currentTarget.style.backgroundColor = 'yellow';
}

function onDragOver(event) {
  event.preventDefault();
}

function onDrop(event) {
  const id = event.dataTransfer.getData('text');
  const draggableElement = document.getElementById(id);
  const dropzone = event.target;
  dropzone.appendChild(draggableElement);
  event.dataTransfer.clearData();
}