JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true" ondrop="drop(event)">	
  More blah
  about 
  <a id="dragme" href="http://www.google.com" class="fancy" contenteditable="false" ondragstart="dragElement(event)">		
    :(
  </a>
  Sparta!
</div>

CSS

.fancy {
  background-color: #123456;
  color: white;
  border-radius: 8px 8px 8px 8px;
  cursor:pointer; 
  display: inline-block;
  padding: 20px;
}

.fancy-img {
  cursor:pointer; 
  display: inline-block;
}

JavaScript

function drop(e) {
  var id = e.dataTransfer.getData("text/html");

  // Can I *not* make a copy here but instead place the actual
  // element into the drop position?
}

function dragElement(e) {
  e.dataTransfer.setData('Text/html', e.target.id);
}